對象適合的替代選項：爲因特網瀏覽器的封面

我正在尋找一種替代方法的對象適合：因爲不支持它的Internet Explorer的封面。基本上我使用的是物體貼合：封面不能在div內拉伸圖像。我在互聯網上尋找一些解決方案，但我發現的所有解決方案都是從css加載圖像，而不是像img標籤一樣加載圖像。有沒有人有任何替代方法不伸展在Internet Explorer的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; 
}

來源

2015-11-02 George Panayi

好，我這個

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%;

來源

2015-11-02 13:02:15

那麼IE 7呢？它不支持對象封面，它適用於html內嵌圖像，而不是背景圖像。 –

這是一個不適用於IE7的解決方案。我不關注IE7，因爲它的市場份額是0.35％ –

那麼IE8呢？我做了一些研究，人們最多使用IE8和IE9-10。 –

你真的可以創建IE9使用的Modernizr +的替代品。所以你仍然可以在支持它的地方使用對象。在這個例子中，我也使用jQuery。如果有用戶想從20世紀的軟件來瀏覽網頁

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世紀版本。這就像試圖在4：3電視上觀看Interstellar（或任何現代16：9電影）的70mm場景一樣，你不會看到對接場景的所有特徵。

來源

2016-05-17 11:05:14 NachPD

不幸的是Edge並不支持對象適合。 ..所以我不僅是舊的瀏覽器問題：/爲什麼微軟，爲什麼？當你必須使用img標籤並且使用background-image不可能/想要的時候，你在這裏展示的是一個很好的解決方案。謝謝:) –

@ miss.emenems Safari不支持object-position ..它不僅僅是Microsoft ;-) – elyrico

對象適合的替代選項：爲因特網瀏覽器的封面

回答

相關問題