
imgタグに「width」「height」を指定すると画像サイズが固定されてしまうため、ネットで調べるとCSSに「height: auto;」を指定するといった解決方法がでてきます。
たしかに「height: auto;」を指定すると画像サイズが固定されることはなくなりました。
ただ、画像が読み込めないと高さがなくなり、レイアウトが崩れる状態になります。
対処法について調べてはみたのですが、aspect-ratioを使う、画像をdivで囲みdiv側で高さを指定するなど人によって対応がバラバラでした。
画像1つ1つに上記を対応するのも手間がかかるのでみなさんはどうしているのか気になり質問させていただきました。
自分的には、基本は「height: auto;」でレイアウトシフトが気になる場合は個別対応かなとは思っています。
0 コメント