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

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら