覚えておきたい便利なCSS object-fit

ホームページにはブログがついていることが多いですね。

さらに多くの場合、写真と記事の組み合わせになっている事が多いと思います。

そこで頭を悩ませるのが画像の表示。

サイズが違う写真を載せた時に余白ができてしまったり、

写真全体が表示されなかったりと悩ましい状態になります。

そこで今回は、そんな時に役立つCSS、

object-fit

について紹介したいと思います。

前回のCSSについてはこちら。

object-fitの使用例

object-fit: cover;

ブログの写真やショップの商品の写真など、

写真には様々なサイズがあると思います。

その画像を縦にも横にも100%表示させたいときに便利なのが、

このobject-fit:cover;です。

縦600px、横600pxのの中に、縦300px、横400pxのimg画像を入れます。

そして画像に

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

と指定したらどうなるでしょう。

こうなります。

では、

img {
   width: 100%;
   height: 100%;
}

と指定したらどうなるでしょう？

そうです。写真が縦に伸びてしまっています。

そこで活躍するのが、

object-fit: cover;

です。

どうなるかというと、

そうです。縦と横に余白がないスタイルになりました。

ちなみにこのobject-fitには、

object-fit: fill;(初期値）

object-fit: contain;

画像の長い方に合わせて表示されます。

object-fit: scale-down;

object-fit: none;

といった指定があります。

表示させたいブロックに表示させたいwidthとheightを指定して、

中に入れる画像にwidth: 100%; height: 100%;をかけます。

img {
    width: 100%;
    height: 100%;
　　object-fit: cover;
}

それでも余白ができてしまう時は、

display: block;

も追加すると良いです。

object-fitも便利なCSSだと思いました。