【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;　このコードです。

画像

縦横比率を変えることなく配置できました☆

参考記事（より詳しく知りたい方↓）

CSSで画像の縦横比を維持したまま拡大する方法を現役エンジニアが解説【初心者向け】

またはじめて知ったこと、便利なことなどをnoteにまとめていこうと思います！