ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

CSSでimg画像をトリミングしたい! object-fitの使い方【IEにも対応】

CSSでimg画像をトリミングしたい! object-fitの使い方【IEにも対応】

「画像をCSSだけでトリミングさせたい」

「object-fitの使い方を知りたい」

悩み

こんな悩みにお答えします。

じつは、CSSのobject-fitを使うことで、imgタグの画像をbackground-imageのようにトリミングなどの操作を行うことができるようになります。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

そこで、この記事では、object-fitの使い方、IEへの対応方法、効率的な使い方について解説しています。

この記事を読めば、object-fitを使って画像を柔軟に取り扱うことで、効率的なWeb制作を行うことができます。

目次
  1. 基本的な使い方
  2. IEへの対応方法
  3. 効率的な使い方
  4. まとめ

基本的な使い方

object-fitは、background-sizeと同じようなプロパティで指定します。

  • contain … 縦横比を保持して指定したサイズ内に、画像全体が入るように配置します。
  • cover … 縦横比を保持して指定したサイズ全体に、画像をトリミングして配置します。
POINT
CSSで「object-fit: contain;」「object-fit: cover;」等と高さ、幅を指定するだけです。

See the Pen object-fit by hashi84 (@hashi84) on CodePen.

object-fitを使わないと画像が引き延ばされますが、object-fitを使うことで画像の縦横比を保持して表示させることができます。

POINT
width、heightの値を省略、autoにすると、object-fitが効きません。
100%でも効かないことがあります。

Webサイトで画像を表示させる方法には大きく分けて2つあります。
「background-imageとimg、どちらを使えばいいのか」については、以下の記事で解説しています。

画像はどっち?background-imageとimgタグの使い分け

HTMLコーディングのときにに画像の表示方法に悩んでいますか?この記事ではどのようにbackground-imageとimgタグを使い分ければいいか、実際にどんなところに使えばいいかを解説しています。ぜひご覧ください。

IEへの対応方法

便利なobject-fitもIEでは使えません。
今後、IEはどんどんEdgeに切り替わっていくだけなので、新たに対応されることもないです。
なので、IEを切り捨てていい状態(ブラウザシェア)になるまで対応し続けなくてはいけません。

まず、ポリフィルとして「object-fit-images」をCDNから読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/object-fit-images⁄3.2.4/ofi.min.js"></script>

WordPressの場合だと、functions.phpに以下をコピペして読み込みます。
別のJavaScriptを読み込んでいる場合は、それぞれの環境にあわせてください。

function custom_print_scripts() {
  wp_enqueue_script('ofi-js', '//cdnjs.cloudflare.com/ajax/libs/object-fit-images⁄3.2.4/ofi.min.js' , '' , '' , true )
}
add_action('wp_print_scripts', 'custom_print_scripts');

次に、footerに以下をコピペします。

<script>
objectFitImages();
</script>

絶対必要ではないですが、IE以外で「object-fit-images」を読み込むと遅くなるので、IEだけで読み込むように以下ように書いておくと遅くならずにすみます。

<?php 
  // ブラウザ取得判定するのに小文字にする
  $browser = strtolower($_SERVER['HTTP_USER_AGENT']);
  // ブラウザ判定
  if (strstr($browser , 'trident') || strstr($browser , 'msie')) {
?>

    //ここにIEだけに読み込ませたいものを書きます。

<?php 
  }
?>
POINT
「object-fit-images」はIEのときだけ読み込むようにすると、その他のブラウザで余計な読み込みを減らすことができます。

CSSでfont-familyに特別な書き方をします。

.contain {
  object-fit: contain;
  font-family: "object-fit: contain;";
}
.cover {
  object-fit: cover;
  font-family: "object-fit: cover;";
}

See the Pen object-fit (IE対応) by hashi84 (@hashi84) on CodePen.

効率的な使い方

「object-positoin」を指定することはあまりないので考えないでおきます。
「object-positoin」の指定がない場合は中央に配置されます。

まず、以下のようなCSSを用意します。

.ofi-cover {
  object-fit: cover;
  font-family: "object-fit: cover;";
}
.ofi-contain {
  object-fit: contain;
  font-family: "object-fit: contain;";
}

あと、画像は別のclassをつけて、サイズを変更するだけで対応していきます。
「object-position」を指定したい場合も別のclassをつけて対応します。

See the Pen ZEbPwej by hashi84 (@hashi84) on CodePen.

POINT
「object-fit」を指定したclassを用意しておけば、あとは画像のサイズだけ変更すればいいです。

まとめ

object-fitの使い方、IEへの対応方法、効率的な使い方について解説しました。

object-fitを使うことで、レスポンシブ等でレイアウトごとに画像のトリミングしたりする必要がなくなるので、コーディングが効率化できます。

object-fit以外の、polyfillを使えばIE11でも使える便利CSSは、こちらの記事にまとめています。

IEでも使いたい!polyfillを使えばIE11でも使える便利CSS 3選

IEでも便利なCSSを使いたいですか?この記事では、IE11に対応していないobject-fit、position:sticky;、CSS変数など、polyfillというJavaScriptを使ってIE11に対応させることができるCSSをまとめています。ぜひご覧ください。