是否存在與背景大小相當的img（javascript）：cover？

我正在展示在網格中展示照片的響應式設計。照片本身可以是所有長寬比和大小。此外，放置它們的網格單元也不是固定寬度，它們會在您調整瀏覽器大小時擴展。此外，每個網格單元儘管在寬度和高度上都是動態的，但是具有相同的大小，而不管其內部的圖像如何。是否存在與背景大小相當的img（javascript）：cover？

爲了在這種高度動態的情況下正確顯示照片，我找到了一個工作配方：每張照片基本上都是一個div，圖像被設置爲背景圖像。爲了在動態大小的網格內正確縮放圖像的未知寬度/高度，我使用了CSS3的背景大小：封面功能。

最終的結果是神話般的，它正是我想要的用戶界面和顯示。儘管如此，我並不滿意這種解決方案的可訪問性：它不適合搜索引擎優化，也不適合插件友好（想想社交插件）。因此，我試圖重現我的工作情況，但這次使用的是好的舊img標籤而不是CSS背景。

我知道有IE8和下面的polyfills背景大小：封面，但我不是在尋找，我正在尋找一個基於img標籤的解決方案。我還發現了使用絕對定位技術以及CSS剪輯屬性的文章，但請記住我的設計絕對沒有關係。

我想我正在尋找的是一個JavaScript例程，它具有背景大小的邏輯：在動態調整大小的情況下，源（圖像尺寸）和目標（顯示框）都是動態的尺寸。

是否有這樣的JavaScript等效於背景大小：封面適用於img標籤？

來源

2012-11-25 Ferdy

您應該可以使用寬度：100％或高度：100％來獲得大部分背景大小的效果：封面。但是，如果您有不同的縱橫比混合，它可能無法正常工作。 –

@LieRyan謝謝，我爲我的答案增加了一個額外的要求：每個網格單元具有相同的大小，基於窗口寬度的動態大小。將一個維度設置爲100％將部分完成這項工作，但它並不像「封面」那樣將圖像居中。 – Ferdy

簡單地設置「img {max-width：100％;}」可能不會做你正在尋找的東西嗎？ –

-1

我相信有你想要做的兩件事情：

有一個圖像填充窗口
確保圖像的垂直和水平居中。

問題是（如果要保持圖像的縱橫比），您必須根據圖像和瀏覽器大小將它垂直和水平居中。

您可以使用display:table和margin:0 auto的組合以及智能高度/寬度設置來製作純CSS解決方案。

見琴：http://jsfiddle.net/5yVYM/3/

.wrapper { 
    display:table; 
    text-align: center; 
    margin:0 auto; 
    width:100%; 
    height:100%; 
} 

.wrapper div { 
    display:table-cell; 
    vertical-align:middle; 
    max-width:100%; 
    max-height:100%; 
} 

img { 
    width:100%; 
    height:auto; 
}

來源

2012-12-13 03:15:15 joehand

這完全不是'backgound-size：cover'的表現。 – hayavuk

Bvukelic是正確的。 –

這是老了，但我最近發現了一種新的解決方案。

代替把要顯示一個div的背景圖像中的IMG的，創建一個圖像：

<div> 
    <img src="mypic.jpg"/> 
</div> 
<style> 
    div { 
     width:200px; 
     height:200px; 
    } 
    img { 
     box-sizing:border-box; 
     width:100%; 
     height:100%; 
     background: url(mypic.jpg) no-repeat center center; 
     background-size:cover; 
     padding:50%; 
    } 
</style>

設置一個內含div是想要的圖像寬度/高度。然後將圖像放在100％寬度/高度，並將src設置爲你想要的img。同時設置你想要的img作爲img的背景圖像。設置背景大小以覆蓋，填充爲50％。

訣竅是填充率爲50％。img的寬度/高度是固定的，所以當你增加填充時，圖像變得越來越小。 50％正好需要多少才能隱藏，現在只需看到圖像的背景圖像即可顯示，但仍然可以訪問！無障礙環境和SEO的

http://jsfiddle.net/t72xgbw0/

來源

2013-06-07 00:47:43 phazei

如果我們有支持'attr'，那會更容易。請投票 - https://bugzilla.mozilla.org/show_bug.cgi?id=435426 – vsync

此解決方案並不完全符合要求的標準。 img標籤的背景圖片將被img標籤的src圖片封鎖，顯示的輸出圖片被拉伸。 –

它確實有效，圖像標籤的src圖像不可見，正如答案中使用填充所解釋的那樣。可能你的默認值有不同的方塊大小。我已經更新了答案幷包含了一個jsfiddle。 – phazei

思考，我創建了一個解決方案，使用jQuery一個非常類似的問題，它不會重現的背景蓋的邏輯，它利用它。

圖像實際上成爲具有背景的容器的角色，並且以編程方式添加背景封面。

$imagesContainer.find('img').each(function(i, elem){ 
    $(elem).css({ 
    backgroundSize : 'cover', 
    backgroundImage : 'url("' + $(elem).attr('src') + '")', 
    backgroundPosition : 'center', 
    display : 'block', 
    height : '100%', // Or any size needed. 
    width : '100%' 
    }); 
    $(elem).removeAttr('src'); 
});

來源

2014-01-10 04:02:21 miguelr

我其實很喜歡這個解決方案的整體概念。它優雅地降低了可訪問性或搜索代理的情況。 –

我找到了一個很好的方式來覆蓋圖像的容器，使用CSS和JavaScript：

HTML：

<div class="container"> 
    <img src="image.jpg"/> 
</div>

CSS：

img { 
    position: absolute; 
    min-width: 100%; // To cover container 
    min-height: 100%; // To cover container 
    top: 50%;   // To move image corner to center of container 
    left: 50%;   // To move image corner to center of container 
}

的Javascript：

$('img').css({ 
    'margin-top': -$('img').height()/2, // To move to center of image 
    'margin-left': -$('img').width()/2 // To move to center of image 
});

確保在加載圖像後運行javascript。

來源

2015-01-08 11:22:46 opohjola

注意到這隻適用於圖像小於其容器:( – opohjola

是否存在與背景大小相當的img（javascript）：cover？

回答

相關問題