【CSS / object-fit】動画や画像の縦横比を保ったままトリミングする

2022年10月30日

2023年1月22日

画像の一覧を表示させる時にサイズが違うと、バラバラでカッコ悪いので高さを揃えました。

投稿する際に画像をリサイズすればいいのですけど、お客さんに投稿をしてもらうとだいたいスマホでとった写真とかをそのまま入れ込むのでサイズがバラバラになってしまいます。

高さの絶対値を指定したくないけど採用しました。

object-fit:cover でトリミングできる

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

こんな感じできれいに高さが揃います。

いろいろダウンロードされますがこの「ofi.min.js」ファイルしか使用しません。

<script src="js/ofi.min.js"></script>

IEに対応させるために font-family: 'object-fit: contain;' を付けるようです。

.object-fit-img {
  object-fit: contain;
  font-family: 'object-fit: contain;'
}

<script>
  objectFitImages('img.object-fit-img');
</script>

↑object-fit-imgというクラスがついたimgのみに適応させてます。

<img class="object-fit-img" src="images/img.jpg">

Webサイトを制作するときにvideoタグで動画を使用することがあると思います。

videoタグにもobject-fit:coverが使えて便利です。

背景画像にbackground-size:cover;を指定することがよくあるかと思いますが、動画版といった感じですね。

gif画像、荒くて見えづらいですが、object-fit:cover;をつけたりはずしたりしてます。

応援クリックよろしくお願いします！

プログラミング