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

こんにちは。

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

width: 100%;
height: 50%;

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

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

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

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

object-fit: coverを指定するとトリミングできる

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

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を指定しない場合、画像の中心でトリミングされます。