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

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

まず､ポリフィルとして「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.

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

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