親要素の幅よりも画像の幅が小さい（大きい）画像を配置するとき、画像を縦横比率を変えずに拡大（縮小）して配置できないかと思いググりました。

調べた内容をまとめます。

縦横比率が違う状態

コーヒーカップが楕円になっています。

縦横比率を変えずに配置

コード

【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にまとめていこうと思います！