![見出し画像](https://assets.st-note.com/production/uploads/images/37512801/rectangle_large_type_2_686e1cf4ad84bc20d0e4ad8713cff504.png?width=800)
【CSS】画像の縦横比率を変えずに拡大、縮小する方法
親要素の幅よりも画像の幅が小さい(大きい)画像を配置するとき、画像を縦横比率を変えずに拡大(縮小)して配置できないかと思いググりました。
調べた内容をまとめます。
縦横比率が違う状態
コーヒーカップが楕円になっています。
縦横比率を変えずに配置
コード
【HTML】
<div class="box">
<img class="image" src="画像" alt="">
</div>
【CSS】
.box {
width: 500px;
}
.image {
object-fit: cover;
width: 500px;
height: 250px;
}
親要素.boxの横幅500pxに合うように、かつ縦横比率を変えずに配置します。
重要なのが object-fit: cover; このコードです。
画像
縦横比率を変えることなく配置できました☆
参考記事(より詳しく知りたい方↓)
またはじめて知ったこと、便利なことなどをnoteにまとめていこうと思います!
この記事が気に入ったらサポートをしてみませんか?