ブログのサムネイルなど、画像を一覧表示させるときはサイズが統一されていると、きれいに整った印象になります。
しかし、Photoshopなどの画像編集ソフトがない環境では、いちいち画像をリサイズするのも現実的ではありません。
ということで今回は、サイズやアスペクト比(縦横比)がバラバラの画像をCSSでトリミングする方法のメモ。
縦・横・中央それぞれに合わせてトリミングする方法と、トリミングせずにリサイズする方法があるので、ケースバイケースで使い分けるとよいかと。
CSSのみで画像をトリミングする方法
中央配置してはみ出た部分を隠す
縦・横・中央、何を基準にするにしても、基本的には「中央配置してはみ出た部分を隠す」形でトリミングしています。
中央配置というとpositionとmarginによる指定が一般的ですが、参考ページで紹介されているようにmarginでは画像ごとに数値を指定する必要があるため、今回の場合は不向きです。
そこでmarginの代わりに、transformプロパティを使用します。
要素を変形させるtransformプロパティ
transformプロパティは要素を変形させるためのプロパティで、要素を移動させたり回転させたり拡大・縮小させたりといった指定ができます。
marginの代わりにこのtransformを使うことで、個別に数値を指定しなくても中央配置ができるようになります。
親要素にpositionプロパティを忘れずに
トリミングしたいサイズでブロック要素(親要素)を用意し、その中に中央配置した画像のはみ出た部分をoverflow: hidden;で隠します。
画像の配置にはpositionプロパティを使用するので、親要素にもpositionプロパティを忘れずに指定しておきましょう。
- CSS
/* トリミングしたいサイズで枠を作る */ .thumb { width: 200px; height: 200px; position: relative; overflow: hidden; }
縦に合わせてトリミング
個人的に一番使いやすいと思っている、縦サイズに合わせてトリミングする方法です。
サムネイルなどに使用される画像は横長のモノが多いと思いますので、縦基準でトリミングすれば変な余白が空くことはありません。
縦を基準にするため、height:100%;、width:auto;を指定します。
- CSS
/* トリミングしたいサイズで枠を作る */ .thumb { width: 200px; height: 200px; position: relative; overflow: hidden; } /* 縦に合わせてトリミング */ .thumb img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%; }
横幅に合わせてトリミング
横幅を基準にトリミングする方法です。
なので、正方形の枠に横長の画像をはめ込むと上下に余白ができます。
好みの問題ですが、僕はあまり好きではないです。
- CSS
/* トリミングしたいサイズで枠を作る */ .thumb { width: 200px; height: 200px; position: relative; overflow: hidden; } /* 横幅に合わせてトリミング */ .thumb img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: auto; }
中央に合わせてトリミング
画像をリサイズせずに中央に配置して、はみ出た部分をトリミングする方法です。
リサイズしないため、大きな画像をはめ込むと見づらかったり、小さい画像だと上下または左右に余白が空くことも。
使いどころに注意が必要ですが、ある程度元画像のサイズが統一されている場合には便利かもです。
- CSS
/* トリミングしたいサイズで枠を作る */ .thumb { width: 200px; height: 200px; position: relative; overflow: hidden; } /* 中央に合わせてトリミング */ .thumb img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
トリミングせずにリサイズ
トリミングはせず、縦・横どちらかを基準に枠内に画像を全表示させる方法です。
そのため、枠となる親要素の縦横比(アスペクト比)と元画像の比率が違う場合は必ず余白ができます。
- CSS
/* トリミングしたいサイズで枠を作る */ .thumb { width: 200px; height: 200px; position: relative; overflow: hidden; } /* トリミングせずにリサイズ */ .thumb img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; width: auto; height: auto; }
うまくいかないときはimgのサイズ指定を確認
上記の指定をしてもうまくトリミングできないときは、他のところでimgにサイズを指定している可能性があります。
たとえば、縦を基準にトリミングする場合に他でwidth:100%を指定していると、意図通りの表示になりません。
そんなときはwidth:autoとmax-width:initial;などで、サイズの指定をリセットしてあげるといいかもしれません。
- CSS
/* トリミングしたいサイズで枠を作る */ .thumb { width: 200px; height: 200px; position: relative; overflow: hidden; } /* 縦に合わせてトリミング */ .thumb img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; /* サイズ指定をリセット！ */ max-width: initial; /* サイズ指定をリセット！ */ height: 100%; }
object-fitプロパティで画像をトリミングする
CSSで画像をトリミングする方法を一生懸命お伝えしてきましたが、実はobject-fitというプロパティを使えば画像のトリミングが簡単にできてしまいます。
- CSS
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プロパティを併用すれば、トリミングする位置を調整することもできます。
- CSS
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月現在)。
※Edgeはバージョン16以降で対応になりました。【2019.11.18追記】
ベストはIE・Edgeがこの世から消えてなくなることですが、あまり期待できませんのでこちらで対処する必要があります。
そのため「object-fit-images」を使って、IE・Edgeでもobject-fitとobject-positionが適用されるようにしていきます。
object-fit-imagesでIE・Edgeに対応する
object-fit-imagesを読み込む
Githubから、ファイルをダウンロードします。
ダウンロードできたら、その中の「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用の指定と併せて通常の方法でも記述しておきます。
- CSS
.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>まとめ
IE・Edgeのせいでひと手間余分にかかりますが、object-fitは非常に便利なプロパティです。
Web制作の現場でも、大量の画像を編集ソフトでいちいちリサイズ処理なんてやってられませんので、使用頻度が高いのではと思います。
