動態調整div的背景圖像

我有一個自動調整窗口寬度的標題中的背景圖像。但是，高度調整不正確 - 繼承的CSS屬性將div設置爲50px的固定高度。動態調整div的背景圖像

目前，我使用的是：

background-size: cover;

我可以指定將被觀察到的DIV固定高度，但隨後的背景是隻能在一個特定的窗口大小是正確的。如果我將尺寸設置爲自動或100％，則會變爲50px;我怎樣才能讓它忽略它認爲它應該是的高度，只是將頭div自動調整爲適應窗口大小的背景圖像？

來源

2015-08-20 Kyle Banerjee

介意分享一些更多的代碼，HTML，CSS ...？ –

這是一個Ruby應用程序，其中的代碼，CSS等甚至只是在這個div的東西分散在一些文件。我儘量保持信息的最小化，以便問題可讀，但我同意在提供上下文時幫助更容易。事實證明，沒有辦法使用樣式來調整div到bg圖像的大小。相反，圖像需要放在div中並推回。 –

div不會展開以適應背景圖像。如果你總是想顯示完整的圖像，並用div展開，你可以通過使用圖像標籤和一些鬼祟的定位來僞造背景。

img.header-image { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
div.header-wrapper { 
 
    position: relative; 
 
} 
 

 
div.header-contents { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    color: #ffffff; 
 
}

<div class="header-wrapper"> 
 
    <img class="header-image" alt="Cat Background" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR39_wPEnBeSEOiHXW1Lc0rwqhEVktULcqnvDDA4J-DZL0gndic" /> 
 
    <div class="header-contents">Here are some header contents.</div> 
 
</div> 
 
<div class="body-contents">And some regular content.</div>

來源

2015-08-20 23:04:40 Eraph

你試過使用這樣的特定尺寸嗎？

background-size: 100% 100%;

來源

2015-08-20 22:52:24 themich

該方法導致寬度調整正確，並且高度保持固定而不是調整大小以保持寬高比。 –

動態調整div的背景圖像

回答

相關問題