画像が伸びる・切れるのはなぜ？object-fitを同じ枠で比べる

今回の仕上がり：同じ円を3通りで表示

画像の幅と高さをそろえたのに、円が縦長になったり、端の文字が消えたりすることがあります。今回は横長の自作SVGを正方形の内容領域へ入れ、object-fitだけを変えました。fillでは円が縦長に、containでは全体が収まって上下に余白ができ、coverでは左右が切り取られます。

画像の元の寸法は400×200、内容領域は240×240です。枠線は各辺2pxなので、画面上の外寸は244×244になります。

収め方と基準位置を変える

1. 下の実験を開き、3枚の円とL・Rの文字を見比べます。狭い画面では縦に並びます。
2. 「画像の基準位置」を左へ変えます。coverで左端が見え、右側が切れることを確認します。
3. 右、中央も試します。枠の大きさは同じまま、見える範囲が変わります。
4. ZIPを保存して展開すると、example.htmlとfit.svgを手元のブラウザで開けます。両方を同じフォルダーに置いてください。

img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  object-position: 50% 50%;
}

欠けて困る画像にはcontainを検討する

写真で枠を埋めたいときにはcoverが使えますが、文字や図の端まで必要ならcontainのほうが向きます。fillは比率が変わるため、顔や円などの形を保ちたい用途では注意が必要です。どれかが常に正しいのではなく、欠けてよい範囲で選びます。

今回はSVG自身のpreserveAspectRatioをnoneにし、画像内部の比率保持が比較へ重ならないようにしました。SVG内部の描き方と、img要素へ指定するobject-fitは別です。SVGの比率保持を比べる実験もあわせて確認できます。

MDNのobject-fit解説と照合し、自作例では3設定と3つの基準位置を確認しました。background-imageや動画への適用は未検証です。