object-fitとobject-positionで画像をトリミングする方法(IE・Edge対応)

2017.12.18 HTML/CSS
object-fitとobject-positionで画像をトリミングする方法(IE・Edge対応)

前回、CSSのみで画像をトリミングする方法をご紹介しましたが、これと同じことを簡単に実現できるobject-fitというプロパティがあります。

トリミングしたい画像に下記のようにobject-fitを指定することで、指定したサイズで画像をトリミングすることができるようになります。

img {
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
}
fill(初期値)
指定サイズに画像が収まるようにリサイズ(アスペクト比を維持しない)。
contain
アスペクト比を維持しつつ、縦横のうち小さい方を基準にしてトリミング(=はみ出た部分は隠される)。
cover
アスペクト比を維持しつつ、縦横のうち大きい方を基準にして指定サイズに収める(=余白ができる)
none
画像をリサイズせずに、そのままのサイズで表示。はみ出た部分はトリミングされ、指定したサイズより画像が小さい場合は余白ができる。
scale-down
noneとcontainのうち、サイズの小さい方が適用される。指定サイズよりも画像が小さければnoneが、画像が大きければcontainが適用される。

また、object-positionプロパティを併用すれば、トリミングする位置を調整することもできます。

img {
object-fit: cover;
object-position: 50% 50%; /* 初期値(中央配置) */
object-position: 0 0; /* 左上基点 */
object-position: 100% 0; /* 右上基点 */
object-position: 100% 100%; /* 右下基点 */
object-position: 0 100%; /* 左下基点 */
}

上記では50%または100%で指定していますが、値を変えることで位置を調整することができます。また、パーセント指定だけでなくpxでの指定も可能ですので、お好みで調整してください。

object-fitとobject-positionはIE・Edgeで使えない!

非常に便利なobject-fitとobject-positionですが、残念ながらIE・Edgeでは対応していません(2017年12月現在)。

ベストはIE・Edgeがこの世から消えてなくなることですが、あまり期待できませんのでこちらで対処する必要があります。

object-fit-imagesを使って、IE・Edgeでもobject-fitとobject-positionが適用されるようにしていきます。

object-fit-imagesを読み込む

object-fit-imagesから、プラグインをダウンロードします。ダウンロードできたら、その中の「dist」フォルダにある「ofi.min.js」というファイルを任意の場所に配置し、HTMLファイルから読み込みます。

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

object-fitを適用させるCSSを追記する

object-fit-imagesを使うためのCSSを追記します。

ここではimgタグに「ofi」というクラスを付与することでobject-fit-imagesによる指定が適用されるようにします。

object-fit-imagesでは、font-familyに下記のように記述することでobject-fitとobject-positionをIE・Edgeに適用させることができます。

また、IE・Edge以外のモダンブラウザでは、通常の指定方法でobject-fitとobject-positionが適用されます。ですので、object-fit-images用の指定と併せて通常の方法でも記述しておきます。

.ofi {
object-fit: cover; /* 他のブラウザ用(=通常の指定) */
object-position: 50% 50%; /* 他のブラウザ用(=通常の指定) */
font-family: 'object-fit: cover; object-position: 50% 50%;' /* IE・Edge対応 */
}

object-fitを適用したい画像にクラスを付与

object-fitを適用したい画像のimgタグにクラス(ここでは「ofi」)を付与します。

<img class="ofi" src="images/image_01.png">

スクリプトを呼び出す

最後に、</body>の前でスクリプトを呼び出せば完了です。

<script>
objectFitImages( 'img.ofi' );
</script>

jQueryを使用している場合は、下記のように記述します。

<script>
$(function () {
objectFitImages( 'img.ofi' );
});
</script>

まとめ

IE・Edgeのせいでひと手間余分にかかりますが、object-fitは非常に便利なプロパティです。

Web制作の現場でも、大量の画像を編集ソフトでいちいちリサイズ処理なんてやってられませんので、使用頻度が高いのではと思います。

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら