IMG SRC VS CSS背景圖像沒有內在的尺寸

我有與HTML減價內建成，我需要改變如下：IMG SRC VS CSS背景圖像沒有內在的尺寸

<img src="..." />

進入

<img class="image" /> // Could also be a div, doesn't matter

，並給它一個背景 - 圖像CSS樣式，而不是（這是由於webpack捆綁和事實我沒有進口和變量在.md文件）

問題是，第一個選項正確加載圖像沒有公頃ving指定高度/寬度，第二種方法不顯示任何東西，除非我指定高度/寬度。

Fiddle demonstrating issue

這是爲什麼，並且是有辦法繞過這個不指定高度/寬度爲每一個這樣的occurence？

來源

2016-05-26 Omri Aharon

爲什麼？因爲設置背景圖像只有這樣做，並且如果元素沒有內容或定義的尺寸，則會相應地摺疊，並且由於背景沒有尺寸，因此無法看到背景。 – j08691

@ j08691有道理。反正有嗎？ –

有什麼方法可以解決什麼問題？有一個空的元素（不是''）沒有尺寸，沒有內容顯示背景圖片？第 – j08691

你能做的最好的是計算img的比例，然後使用值padding和cover，使其適用於：

舉個例子，如果圖像是1:1比例：

.image { 
 
    background-image: url('http://i.imgur.com/3Zh2iqf.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size:cover; 
 
    padding-top:100%; 
 
}

<div> 
 
    <div class="image"> 
 
    </div> 
 
</div>

來源

2016-05-26 15:22:34 DaniP

好的方法。它總是歡迎學習新的東西:) –

非常好的巫術！ –

@OmriAharon很樂意幫助你 – DaniP

IMG SRC VS CSS背景圖像沒有內在的尺寸

回答

相關問題