はじめに
現役エンジニアではありません。
2020年ごろにほんの少しWeb系フリーランスの方のお手伝いをしていた程度です。
現在はこれからWebデザイナーを目指す方に、HTML/CSSのさわりを教える仕事をしています。
ですので、現場でhotな技術を持ち合わせておらず、化石状態。
これからの方に誤った情報を伝えないためにも、考え方が間違っている、もっとよい方法がある等、ぜひご指導お願いいたします。
imgタグへの漠然とした恐怖
imgタグそのものに任意の幅を与えるとなんかおかしい。（ことになる気がする）
もちろん大丈夫なこともあるけれど、レスポンシブ対応やposition:absoluteにしたときになんか変。
そんなわたしを救ってくれたのが
<div class="img-wrapper">
<img src="hoge.png" alt="hoge">
</div>
.img-wrapper{
width:任意の幅;
/*height:任意の高さ;*/
}
.img-wrapper img{
width:100%;
height:auto;
}
/*img-wrapperに高さも指定した場合*/
.img-wrapper img{
width:100%;
height:100%;
object-fit:cover;
}
imgを入れる箱をつくり、箱には任意の箱いっぱいに画像を表示する。縦横比を固定するためにheightにはautoを指定。
img-wrapperにheightが指定されている場合は、imgのheightを100%にしてobject-fit:coverを設定。
おまじないだよ。
箱の幅をいじって、imgのwidthは100%にしておく。先生との約束だよ。
そんな風に教えていました。（昨日まで）
ほんまにそれでええんか？
これから活躍する生徒さんに、数年前、アルバイトエンジニアのわたしが、頼れる先輩もいない中、悪戦苦闘のすえ仕入れた情報をお伝えしてよいのか？
そんな疑問が頭をよぎりました。
とりあえずなんで↑のようなコードを書くようになってしまったのかを思い出してみる。
・
・
・
色々思い当たる節はあるのですが、一番は
写真をCSSで丸くトリミングする。
これが原因なのではないかと思います。
その後、img-wrapperに任意の幅をもたせ、img自体は親であるimg-wrapperいっぱいに表示した方が汎用的でなにかと都合がよかったので、imgに任意のwidthを指定することに抵抗が生まれてしまったというわけです。
imgにwidth/heightを指定すべき！という主張
img width 100%でググると見出しのような記事がでてきます。
imgにwidthとheightを指定しておかないと、レイアウトシフトが起こってしまうということでした。
lazy-load(遅延ロード)などを利用した時に起こるということです。
最終的にどうしたか
最終的に別にwidth:100%は悪くないということ、そしてaspect-ratioをプラスで記述することに行きつきました。
脳死でheight:autoを書いていたことの方がダメだったのかな。
height/width指定とaspect-ratio指定のどちらがよいのか論争も行われいましたが、個人的にしっくりきた書き方だったのでaspect-ratioを採用です。
問題がおきたらまた考えようと思います。
.img-wrapper{
width:任意の幅;
/*height:任意の高さ;*/
}
.img-wrapper img{
width:100%;
aspect-ratio: 任意のアス比;
object-fit: cover;
}
ただ、これできちんとレイアウトシフトが起こらなくなったのかというと、
画像が高速で読み込まれてしまったために確認が出来ておりません。
時間のある時にきちんと確認したいと思います。
追記
検証ツールでCPU 4x slowdownにして確認できました。
height:autoではやはりレイアウトシフトが起きていて、aspect-ratioを設定することで予め高さが用意されるので、レイアウトシフトが回避できています。