object-fitを使用せずimgをbackground-size:coverのように表示

IEはobject-fitに対応していませんので、positionとtransformのあわせ技でimgをbackground-size:coverのように表示させてみます。

.object-fit {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.object-fit img {
position: absolute;
top: 50%;
left: 50%;
max-width: none;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%,-50%);
}

imgの親要素.object-fitの高さをheightではなくpadding-topで横幅との相対で取る事によって、比率を維持したまま伸び縮みします。
16:9で表示したいのなら56.25%

1:1正方形なら100%と指定します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA