画像の見せ方を整える — 潰れる・はみ出すを止める2行

画像を扱い始めると、まず2つの問題にぶつかります。「はみ出す」と「潰れる」です。原因も対処も違うので、順番に見ていきましょう。

はみ出す → max-width: 100%

画像には元の大きさがあります。幅3000pxの写真をそのまま置くと、画面が狭くても3000pxで表示しようとして、横にはみ出します。

対策は決まりきった2行です。CSSの最初に書いておけば、以後この問題は起きません。

style.css に必ず入れておく

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% は「親より大きくならない」という意味です。height: auto を添えると、幅に合わせて高さも比例して縮むので、縦横比が保たれます。

一覧のサムネイルなどで「幅も高さも揃えたい」場面があります。ここで width と height を両方指定すると、写真が引き伸ばされて潰れます。

object-fit: cover を足すと、指定した枠を保ったまま、はみ出す部分を切り取って表示してくれます。写真の中央を残して、上下または左右がトリミングされます。

CODE潰れる指定と、切り取る指定コードを書き換えると、すぐ下で動きます

2つ目の object-fit を消してみてください。同じ枠なのに、絵が引き伸ばされて潰れます。

どこを中心に切り取るかは object-position で変えられます。人物の顔が切れてしまうときは、object-position: top を指定すると上寄りで切り取られます。

画像を div で囲むと、画像の下に数pxのすき間ができることがあります。これは画像がインライン要素で、文字のベースラインに合わせて配置されるためです。バグではありません。

img に display: block を指定すれば消えます。vertical-align: bottom でも消えます。原因を知らないと延々と悩むところなので、覚えておいてください。

実務での基本形

<img src="photo.jpg" alt="説明" width="800" height="600" loading="lazy" />

ただし、最初の画面に出る大きな画像には lazy を付けないでください。表示が遅れて逆効果になります。