ブログ一覧のサムネイル画像など、画像の枠が決まっている場合があります。
どんな比率の画像が来ても、きれいに画像が表示されるようにしたいです。
そんなときはobject-fitプロパティを使えば解決します。しかしIEで対応してないのですよね…。
まず、object-fitプロパティの概要について説明してから、対応方法の4つを紹介していきます。
目次
object-fitプロパティとは？
object-fitプロパティはimgタグやvideoタグなど置換要素のコンテンツを要素のボックスに、どうはめ込むか設定するプロパティです。
ボックスに対してのオブジェクトの配置は、object-positionプロパティを使用します。
object-fitの値
値についてテーブルにまとめてみました。
| 値 | 説明 |
|---|---|
| contain | コンテンツのアスペクト比を維持したまま、コンテンツ全体が、ボックスに収まるように拡大縮小される |
| cover | コンテンツのアスペクト比を維持したまま、ボックスを覆うように拡大縮小される。 コンテンツのアスペクト比がボックスのアスペクト比と合わない場合は、コンテンツの方が合うように切り取られる |
| fill | コンテンツ全体が、ボックスを埋めるサイズになる。 コンテンツのアスペクト比がボックスのアスペクト比と合わない場合は、コンテンツがボックスに合うよう引き伸ばされる |
| none | 拡大縮小しない |
| scale-down | コンテンツはnone又はcontainを指定したかのようにサイズが決められ、コンテンツの実際のサイズが小さいほうを採用する |
だいたいcoverかcontainのどちらかを設定します。
もっと詳しく知りたい方は下記のリンクを参考にしてください。
例
ここにアスペクト比の違う二つの画像があります。
画像に幅250px、高さ150pxを設定します。
右側は、指定したアスペクト比と同じアスペクト比の画像なのできれいに表示されています。
一方左側は、違うアスペクト比の画像なのでゆがんでしまっています。
こういうときにobject-fitプロパティを画像に設定すると、きれいに表示されます。
上の画像はobject-fit: cover;を、下の画像はobject-fit: containを設定しました。
上が要素を覆うようにオブジェクトが拡大されて切り取られ、下がオブジェクト全体がボックスに収まるように縮小されているのが分かります。
このように便利なプロパティですが、IEでは非対応です。
下記のリンク先で対応しているブラウザが分かります。IE11でも対応していないですね。
上の画像は、IEでobject-fit: cover;を設定したときのものです。プロパティが効いてなく、画像がゆがんでしまっていますね。
これからIEでも画像がきれいに見せる手段を挙げていきたいと思います。
対応方法1：プラグイン「object-fit-images」を使う
ダウンロード
Gitから落としてきます。
ダウンロードは、画像の①を押して
・②を押して、適当な場所にクローンする
・③を押して、zipファイルとしてダウンロード
のどちらかの方法でダウンロードしてください。
わざわざ落としたくない人はこのページにCDNがありますので、コピペしてください。
ダウンロードしたファイルの中にdistディレクトリがあります。
そこにあるofi.min.jsを使いたいプロジェクトなどに移動してください。
ofi.min.jsまたはCDNの読み込み
bodyタグの閉じタグの直前で読み込みます。
1 2 3 4 5 6 | <script src="/js/ofi.min.js"></script> // CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script> |
スクリプトの呼び出し
1 2 3 4 5 6 7 8 | objectFitImages(); // jQuery $(function () { objectFitImages() }); |
この記述だとすべての画像に対して、処理が実行されます。
下記のように指定することで必要なクラスに対してのみ、処理を実行することができます。
1 2 3 | objectFitImages('.ofi-img'); |
スタイルの指定
1 2 3 | <img src="画像のパス" alt="" class="img"> |
1 2 3 4 5 6 7 | .img { object-fit: cover; object-position: bottom; font-family: 'object-fit: cover; object-position: bottom;'; } |
これでIEでもobject-fitプロパティとobject-positionプロパティを使用することができます。
対応方法2：プラグイン「fitie.js」を使う
ダウンロード
Gitから落としてきます。
ダウンロードしたファイルの中にdistディレクトリがあります。
そこにあるfitie.jsを使いたいプロジェクトなどに移動してください。
fitie.jsの読み込み
bodyタグの閉じタグの直前で読み込みます。
1 2 3 | <script src="/js/fitie.js"></script> |
これでobject-fitプロパティが設定できるようになります。
object-fit-imagesに比べると、読み込むだけでいいので簡単ですね！
ただobject-positionプロパティには対応していないので、その場合はobject-fit-imagesを使ってください。
対応方法3：jQueryとCSSで対応する
1 2 3 4 5 | <div class="img-box js-img-bg thumb"> <img src="画像のパス"> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | (function ($) { // image bg $.fn.imageBg = function () { var $this = this; var imgSrc = $this.find('img').attr('src'); $this.find('img').hide(); $this.css({ backgroundImage: 'url("' + imgSrc + '")' }); } //↓実行 $('.js-img-bg').each(function () { $(this).imageBg(); }); })(jQuery); |
1 2 3 4 5 6 7 | .thumb { background: no-repeat center center / cover; height: 指定する; } |
1 2 3 4 5 6 | .thumb { height: 0; padding-top: 指定する; } |
jQueryで
1. 要素の全子孫要素のimgタグの画像のパスを取得し、imgタグを非表示にする
2. 要素に1で取得した画像のパスを背景画像として設定する
3. クラス「js-img-bg」が指定されている要素すべてに1、2を実行する
みたいなことをやってます。
object-fitプロパティの代わりにbackground-sizeプロパティで設定しようとしています。
1 2 3 4 5 | .thumb { background: no-repeat center center / cover; } |
上記の箇所ですね。object-fit: contain;を設定したければ、coverをcontainに書き換えます。
object-positionプロパティもbackground-positionプロパティで置き換えてます。
筆者は基本的にこの手法を使ってます。
対応方法4：CSSだけで対応する
上記と似たような手法で以下のものもあります。
1 2 3 4 5 | <div class="img"> <span class="img-inner" style="background-image: url('画像のパス')"></span> </div> |
1 2 3 4 5 6 7 8 9 10 | .img-inner { background: no-repeat center center / cover; display: block; &::before { content: ''; display: block; padding-top: 指定する; } |
やっていることは、ほぼほぼ一緒ですね。
spanタグに背景画像として最初から設定していて、要素の疑似要素で高さを保持しています。
・jQueryを書くまでもない
・別にimgタグがあってもなくても、どちらでもいい
・WordPressで画像が動的にならない / 動的になっても画像のパスを取得できる
上記が当てはまるなら、こちらの方法でもいいかもしれません。
まとめ
IEがなければと思うのですが、Web制作だと対応する場合の方が多いです。
BRISKではどの方法が採用されているかは人によります。コードを見て、そのやり方に倣う感じですね。
今回は画像を枠内に収めるときや、WordPressを構築するサイトのコーディングのときに対応しておきたいポイントについて紹介させていただきました。
システムを構築する人が気持ちよく作業できるように、コーディングする人は意識していきたいですね。
