概要
background-sizeのようなスタイルをimgで実現する。CSSプロパティのobject-fitとJavaScriptプラグインのobject-fit-imagesを利用してimg要素を親要素いっぱいに広げて表示する方法を紹介用途
- img要素をCSSだけでトリミングする
- CSSプロパティーのobject-fitを利用
- ※Microsoft Edge(15以下)・IEはJSプラグインobject-fit-imagesが必要
検証ブラウザ
- Microsoft Edge(※Ver.15以下は要object-fit-images)
- IE11(※要object-fit-images)
- IE10(※要object-fit-images)
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<div class="c-block">
<div class="c-block__elem">
<img src="https://konocode.jp/img/common/dummy_600_400.png" alt="" class="js-object-fit">
</div>
<div class="c-block__elem">
<img src="https://konocode.jp/img/common/dummy_500_500.png" alt="" class="js-object-fit">
</div>
</div>
SCSS
.js-object-fit {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;'
}
JS
objectFitImages('.js-object-fit');
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
