画像の縦横比をいい感じにする object-fit【css】

経緯

デザインで特定の枠に画像を収めたいというときはよくあるであろう。

縦固定でwidth100%にするのか、はたまたその逆か。どちらにせよ、どちらかに大きな値が来た場合くしゃってひしゃげてしまう。

大きいほうを基準に小さいほうをそろえる

何かの枠に収めたいとき、その枠を最大値としたい。そのため、その画像の大きいほうを最大値にしてあげて、小さいほうをその拡大した%に合わせてあげたい。

そうすることで、縦長が来ても、横長が来ても対応ができるのである。

これはレターボックスという映像技術らしい。

レターボックス (映像技術) - Wikipedia

CSSでの書き方

object-fit - CSS: カスケーディングスタイルシート | MDN

これを条件分岐みたいにCSSで書くのは難しそうだなあとおもっていたところ、object-fitというスタイルがあった。まさに、欲しかったものであり、しかも中央ぞろえにまでしてくれるというすぐれものである。

１段目が無理やり入れようとしたことでつぶれている画像であり、２段目の画像の縦横比が本来正しい。

1段目は縦横どちらかを固定しもう片方にautoをかけている。

2段目はobject-fit:contain;を利用している。

とても便利である。

コード

<div class="wrapper">

    <div class="container">

        <img class="img-size-w-auto"

src="https://drive.google.com/uc?export=download&id=1cJdXMPICe2Qi17KefY8sk9qfUsiBzNFd">

    </div>

    <div class="container">

        <img class="img-size-h-auto"

src="https://drive.google.com/uc?export=download&id=1cJdXMPICe2Qi17KefY8sk9qfUsiBzNFd">

    </div>

    <div class="container">

        <img class="img-size-w-auto"

src="https://girlydrop.com/wp-content/uploads/post/p7925.jpg">

    </div>

    <div class="container">

        <img class="img-size-h-auto"

src="https://girlydrop.com/wp-content/uploads/post/p7925.jpg">

    </div>

</div>

<div class="wrapper">

    <div class="container">

        <img class="img-size-fit"

src="https://drive.google.com/uc?export=download&id=1cJdXMPICe2Qi17KefY8sk9qfUsiBzNFd">

    </div>

    <div class="container">

        <img class="img-size-fit"

　　　　　　　src="https://girlydrop.com/wp-content/uploads/post/p7925.jpg">

    </div>

</div>

<style>

.wrapper{

    display: flex;

}    

.container{

    height: 500px;

    width: 500px;

    background-color: aqua;

    border:solid 5px crimson;

}

.img-size-w-auto{

    height: 500px;

    width: 100%;

}

.img-size-h-auto{

    height: 100%;

    width: 500px;

}

.img-size-fit{

    height:500px;

    width:500px;

    object-fit:contain;

}

</style>