【CSS】画像をトリミングして表示する！「object-fit」の使い方

ひぐま
ひぐま

はじめに

例えば、CMSを使用する場合など、 まったく違うサイズの画像や動画を特定のサイズのボックスにトリミングして配置したいときは「object-fit」で指定するのが便利なのをご存じでしょうか。

早速ですが、例として、下のヒグマの画像2つをトリミングしてみたいと思います。

higuma.jpg

higuma2.jpg

508×427、400×267とサイズがバラバラですが、
このふたつを300×300の大きさにトリミングして綺麗に並べたいです。

HTML

<ul>
   <li><img src="img/odjectfit/higuma.jpg" alt="ヒグマ"></li>
   <li><img src="img/odjectfit/higuma2.jpg" alt="ヒグマ2"></li>
</ul>

CSS

<style>
    ul{
        font-size:0;/*リストの隙間に生じる空白を削除してます。*/
        list-style:none;
    }
    ul li{
            display:inline-block;/*横並びに*/
            border:1px solid #ccc;/*わかりやすいようにボーダーをいれてます。*/
            background:#e6e6fa;/*わかりやすいように背景色を入れています。*/
            }
    ul li + li{ margin-left:20px; }
    ul li img{
        width:300px;
        height:300px;
        object-fit:cover;/*ここの指定*/ 
     }
</style>

基本、サイズを合わせたいオブジェクトに"object-fit:cover;"を指定してあげるだけです。
配置したオブジェクトはアスペクト比が維持されたまま、
ボックスサイズに収まるように拡大縮小され、はみ出た部分はトリミングされます。

プロパティは他にもあり、 比べると以下の通りです。

プロパティの一覧

cover
配置したオブジェクトはアスペクト比が維持されたまま、
指定ボックスサイズに収まるように拡大縮小され、はみ出た箇所はトリミングされます。
fill
配置したオブジェクトはボックスサイズに収まるように調整されますが、アスペクト比が合っていない場合はボックスに合わせて引きのばされます。
contain
配置したオブジェクトはアスペクト比を維持したままボックスサイズに収まるように調整されます。 アスペクト比が合っていない場合は余白部分がうまれ、レターボックスのような表示になります。
none
配置したオブジェクトは拡大縮小されず、ボックスサイズでトリミングされます。
scale-down
配置したオブジェクトとボックスサイズから小さいほうに合わせて、アスペクト比を維持したまま、containもしくはnoneを指定した時の表示になります。

トリミング位置を指定したい

初期値ではオブジェクトはすべて中央でトリミングされますが、このトリミング位置を指定したい場合は"object-position"のプロパティで指定してあげることで変更できます。

<style>
   img{ 
        object-fit:cover;
        object-position:left botom;/*左下*/
       }
</style>

デモで実際にみるとそれぞれの表示はこんな感じです。

IEでの対応について

2022 年 6 月にサポート終了が決まったIEですが、このobject-fitはIE11が非対応なので、念のため、簡単に対応させることができるプラグインもご紹介しておきます。

object-fit-images

上記から、distフォルダの中のofi.jsをダウンロードして、呼び込んでください。

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

スクリプト

<script>
window.onload = function() {
　　　　　　　　　objectFitImages （ '★オブジェクトのクラス名やIDなど '）
                               }）;
</script>

jQueryを使用する場合

<script>
$（function（）{
             objectFitImages（ '★オブジェクトのクラス名やIDなど' ）
              }）;
</script>

CSS

img{
   object-fit ： contain; 
   font-family ： 'object-fit：contain;'
}

※指定は font-familyで追加します。

関連記事