要素内にぴったり画像を収めたい(画像をトリミング)

コーディング
スポンサーリンク

img画像を要素内に治める

divタグを3つ並べてheightとwidthをつけて空間を作りました。

 

この2つ目の白いdivタグの中にimgタグで画像を入れたいと思います。
普通にdiv内にimgタグで画像を入れると・・・

 

小要素のimgは親要素からはみ出す

 

小要素のimgは親要素を超えてはみ出してしまいます。
これをなんとかして親要素内に収めたいと思います。

 

imgに高さと幅を指定すると要素内に収まるが画像の比率が崩れる

imgを親要素内に収めるために width:100% & height:100% を指定します。

 

要素内には収まりますが、無理に100%にしてしまったため画像の比率が崩れてしまいます。

 

object-fit: cover;で要素のサイズに切り取られる

 

先ほどのCSSにobject-fit: cover;をつけることで画像がトリミングされ要素内にぴったり収まります。

 

object-positionでトリミングの位置を指定できる

object-fit: cover;で画像を要素内に収めると、画像はセンターに合わせてトリミングされます。
トップやボトムなどセンター以外の位置でトリミングしたい場合は
object-position: top などと指定できます。

 

 

余白を残して画像全体を表示させたい時はobject-fit: contain;

余白を残したい場合や、画像をトリミングせず全体を表示させたい場合はobject-fit: contain;できれいに表示できます。

コメント

タイトルとURLをコピーしました