CSSでの画像の操作

画像はウェブページにおいて重要な役割を果たします。コンテンツを効果的かつ明確に表示するために役立ちます。時には、コンテンツ画像のサイズが表示先のコンテナより大きかったり小さかったり、またはアスペクト比がコンテナと異なる場合があります。ここでは、画像を最適な方法で表示する方法について考察します。

object-fit

object-fitは、画像をコンテナに合わせてどのようにリサイズするかを指定します。

object-fit: fill | contain | cover | none | scale-down;

• fill: アスペクト比を無視して画像をコンテナ全体に引き伸ばします（歪む場合があります）。
• contain: アスペクト比を維持しながら画像全体をコンテナ内に収めます（空白ができる場合があります）。
• cover: アスペクト比を維持しつつコンテナ全体を埋めます（画像が切り取られる場合があります）。
• none: 画像の元のサイズを使用します。コンテナからはみ出すことがあります。
• scale-down: noneまたはcontainのうち小さい方を使用します（元のサイズか、収まるように縮小）。

object-position

object-position は、画像がそのコンテナ内で表示される位置を指定するプロパティ。水平方向と垂直方向の2つの値、または予約語を使用可能。

object-position: x y;