股利其背景圖像的設置大小

我有我的網頁上以下DIV：股利其背景圖像的設置大小

<div id="logo"> 
</div>

我想提出一個背景圖像在這個div：

#logo { 
    background: url('logo3_light.jpg') no-repeat; 
    width: 100%; 
    height: auto; 
}

但圖像從不出現，因爲div的高度是0px。

我想以某種方式設置包裝div的高度縮放圖像的高度。可能嗎？

來源

2014-02-27 damluar

什麼是您的徽標jpg的大小（寬度和高度）？ – fcalderan

1600x100px，但我不想設置高度：100px，我希望它是動態計算的，具體取決於寬度，如高度：auto – damluar

'div'最終是否會有內容？是否有你不想設置'div {height：100px; ''？ – TylerH

由於您的原始圖像1600x100高度是寬度的6.25%，所以你可以試試這個

#logo { 
    background: url(http://dummyimage.com/1600x100/000/fff.jpg) no-repeat; 
    width: 100%; 
    height: auto; 
    padding-bottom : 6.25%; 
    background-size: cover; 
}

例如在codepen：http://codepen.io/anon/pen/EnJvI

注意：你不能簡單地用height: 6.25%因爲身高會相對噸o父元素的高度（body元素，其高度未定義，因爲您的徽標元素爲空，因此爲0）。

padding-bottom改爲使用元素自身的寬度來計算正確的值（這種技術通常用於保持響應式設計上視頻的正確高寬比，fyi）。

反正，我不建議使用空標記爲造型宗旨：您的標誌應該是一個普通img元素，而不是背景，因爲一個標誌通常傳達信息

來源

2014-02-27 15:47:23 fcalderan

grazie！還有一個問題：你的解決方案有效，但爲什麼我不能直接設置高度的6.25％？不知何故，它不會那樣工作。 – damluar

這是由於選擇了一個相對單位：根據父母高度（'body'沒有高度定義），它將是'6.25％'，而'padding-bottom'計算寬度的6.25％'的元素本身 – fcalderan

因此，6.25％的高度和6.25的填充是2個不同的值？ – damluar

-1

不幸的是，沒有簡單的方法。例如，您可以使用JavaScript獲取圖像的url，加載並獲取其尺寸，然後將尺寸設置爲div元素。

我會做什麼，會直接使用標籤將圖像放在div中。如果你需要額外的內容，你可以把內容放在另一個div裏面。然後內部div的定位可以被設置爲絕對的等等等等，希望它讓你知道該怎麼做

來源

2014-02-27 15:44:49 Grishka

有一些簡單的方法，只是不如人們想象的那麼明顯。看到我的答案。 –

答案在這裏找到：How to get div height to auto-adjust to background size?

<div style="background-image: url(http://your-image.jpg);"> 
    <img src="http://your-image.jpg" style="visibility:hidden"/> 
</div>

來源

2014-02-27 15:48:04

股利其背景圖像的設置大小

回答

相關問題