【CSS】IE11で対応していないobject-fitを画像に適応させる方法
ブログ一覧のサムネイル画像など、画像の枠が決まっている場合があります。
どんな比率の画像が来ても、きれいに画像が表示されるようにしたいです。
そんなときはobject-fitプロパティを使えば解決します。しかしIEで対応していません。
そこで、これを解決するための対応方法の4つを紹介していきます。
対応方法1：プラグイン「object-fit-images」を使う
index.html
|
1
2
3
|
<img src=“画像のパス” alt=“” class=“img”>
|
style.css
|
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：CSSだけで対応する
index.html
|
1
2
3
4
5
|
<div class=“img”>
<span class=“img-inner” style=“background-image: url(‘画像のパス’)”></span>
</div>
|
style.css
|
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で画像が動的にならない / 動的になっても画像のパスを取得できる
上記が当てはまるなら、こちらの方法でもいいかもしれません。
