画像のサイズ指定をするときは”object-fit”を指定する

CSS 2019/01/23

こんにちは。

htmlで画像を埋め込むときにに、cssで

width: 100%;
height: 50%;

とか指定すると、画像が拡大・縮小されてしまい、画像が汚くなってしまいます。

「トリミングできればなぁ」

と思ったときは、”object-fit” を指定してください。

画像を拡大・縮小せずに、トリミングする方法

このように書いてください。

width: 100%;
height: 120px;
object-fit: cover;

こうすると、画像の中央を中心にトリミングしてくれ、綺麗な画像が出力されます。

以下のように、object-positionで指定すると、トリミングの中心を指定できます。

width: 100%;
height: 120px;
object-fit: cover;
object-position: 横の位置縦の位置; // %やpxで指定（画像の左上が原点）

object-positionを”0 0″にすると、左上を中心、
object-positionを”100% 100%”にすると、右下を中心として、トリミングしてくれます。

なお、デフォルトが、”50% 50%”で、object-positionを指定しない場合、画像の中心でトリミングされます。