object-fitの代替オプション：Internet Explorer用のカバー

Question

インターネットエクスプローラのオブジェクトフィッティングの代わりの方法があります。サポートしていないためです。基本的に私はobject-fit：coverを使ってdiv内の画像を伸ばさないようにしています。私はインターネット上でいくつかのソリューションを見ているが、私が見つけたのは、私がそれをやっているようにimgタグからではなく、cssからイメージを読み込むソリューションだった。誰もがインターネットエクスプローラのdiv内の画像を伸ばすのではなく、代替方法があります誰も私を助ける？ここ

は、単純なコードが

HTML

<div class="grid-image"> 
    <img itemprop="image" alt="TEST" src="images/15.jpg"> 
</div> 

CSS

.grid-image { 
    width: 100%; 
    background-color: grey; 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
} 

grid-image img { 
    object-fit: cover; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

Answer 1

OKです私はこの

HTML

<div class="grid-image" style="background-image: url(images/15.jpg);"></div> 

でそれを解決しました

CSS

-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 

Answer 2

あなたは本当にModernizrを使用して+ IE9のための代替案を作成することができます。したがって、サポートされている場所にオブジェクトフィットを使用することができます。この例では、jQueryも使用しています。

if (! Modernizr.objectfit) { 
    $('.grid-image').each(function() { 
     var $wrapper = $(this), 
     imgUrl = $wrapper.find('img').prop('src'); 
     if (imgUrl) { 
     $wrapper 
     .css('backgroundImage', 'url(' + imgUrl + ')') 
     .addClass('compat-object-fit') 
     .children('img').hide(); 
     } 
    }); 
} 

20世紀のソフトウェアを使用してウェブをブラウズしたい場合は、明らかに20世紀のウェブを取得します。これはInterstellar（または現代の16：9フィルム）からの70mmシーンを4：3のチューブテレビで見ようとするようなものですが、ドッキングシーンのすべての機能を見ることはできません。