background-size を使って画像を適切な枠に収めるのは object-fit を使ったらとても簡単だった

CSS のプロパティに object-fit というのがあるのは知っていたけど便利だと思ったので調べてみた。

アイテムが複数カラムで一覧上にレイアウトされている場合、画像サイズの違いから段違いにならないようにするために画像が表示されている部分の枠のサイズを固定していることが多いと思う。
固定した枠に対して画像をアスペクト比を保ったまま、枠サイズに隙間が出ないようにしたり、隙間が出ても画像の切り捨て部分がないように伸縮させて表示させたりする。

background-size を使った方法

今までは以下のようなマークアップで表示させていた。img 要素で一般的に表示する方法だと、JavaScript で画像ダウンロードしたものを枠に対してサイズ調整をしてはめていかなければいけません。

<ul class="items">
  <li class="item">
    <a>
      <img
        class="item__img"
        src="<base64エンコードした1pxの透明なダミー画像>"
        style="background-image: url(<画像URL>);" />
    </a>
  </li>
</ul>

.item__img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 200px;
  width: 200px;
}

このように、HTML では img 要素の src 属性にbase64エンコードした1pxの透明なダミー画像で表示させて、style 属性で background-image を指定する。次に CSS で background-size: contain; を指定することで、img 要素で指定した背景画像に対してサイズの伸縮をさせているので、手数としては多すぎる。

object-fit を使った方法

object-fit を使う場合は、もっと簡単になる。

<ul class="items">
  <li class="item">
    <a>
      <img
        class="item__img"
        src="<画像URL>" />
    </a>
  </li>
</ul>

.item__img {
  height: 200px;
  object-fit: contain;
  width: 200px;
}

img 要素の CSS のクラスで object-fit: contain; と宣言すればいい。
このような宣言を書くことで、img 要素の中身(この場合は画像)がどのように枠に対して伸縮されて表示されるかを指定することができる。

まとめ

すごく便利なプロパティだが、Internet Explorerは使えないので、採用する場合はターゲットブラウザを確認する必要がある。

また、今回用いたコードはGithubで公開している。

参照

• object-fit