画像をボックスサイズに合わせる（何回も忘れているのでメモ）

要件は以下
・大きさが一定のボックスに画像をはめ込む
・横長の画像が来たらボックスの横幅に合わせる
・縦長の画像が来たらボックスの縦幅に合わせる
・画像サイズがボックスサイズより小さい場合はそのまま
・縦横中央揃え

img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}

ボックスの上下中央に配置する場合。

.box {
display: flex;
justify-content: center;
img {
width: 80%;
object-fit: contain;
}
}

画像の縦横比を固定したい場合。

.box {
width: 60%;
aspect-ratio: 4 / 3;
img {
width: 100%;
}
}