object-fitの代替オプション：IE用contains

Question

object-fitの代替オプションを探しています：Internet Explorerではサポートされていません。 私のサンプルコードは

.cbs-Item img { 
    height: 132px ! important; 
    width: 132px ! important; 
    object-fit: contain; 




<div class="cbs-Item"> 
    <img alt="image" src="" width="146" style="BORDER:0px solid;"> 
</div> 

すべての解決方法はありますか？

Answer 1

賢いポジショニングを使用すると、イメージのサイズを調整し、その比率を維持し、コンテナ内で中央に配置できます。

ここでは、伸張せずに132x132pxコンテナ内に収まるように350x150ピクセルのイメージを設定した例を示します。

.cbs-Item { 
 
    background: #eee; 
 
    height: 132px; 
 
    width: 132px; 
 
    background-size: contain; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
}

<div class="cbs-Item" style="background-image: url('http://placehold.it/350x150');"></div>

：

.cbs-Item { 
 
    background: #eee; 
 
    position: relative; 
 
    width: 132px; 
 
    height: 132px; 
 
} 
 

 
.cbs-Item img { 
 
    display: block; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="cbs-Item"> 
 
    <img src="http://placehold.it/350x150" /> 
 
</div>

また、あなたはIMGの代わりに背景画像を使用することができれば、それをコーディングするためのクリーンな方法があります