縮放 div 以適合背景圖像

Question

我有一個帶有背景圖像的 div，我想擴展 100% 的寬度並自動縮放 div 以適應圖像所需的高度。 目前，除非我將 div 的高度設置為 100%，否則它不會縮放 div 高度，但它只是拉伸到屏幕的整個高度，而我希望它縮放到圖像的高度。

這是html：

<div id="mainHeaderWrapper">


</div><!--end mainHeaderWrapper-->
<br class="clear" />;

這是CSS：

    #mainHeaderWrapper{


     background: url(http://localhost/site/gallery/bg1.jpg);
     width: 100%;
     height: auto;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; 
     background-size: 100% 100%;

     background-repeat: no-repeat;
     background-position: center center; 

 }

 .clear { clear: both; }

感謝您的任何幫助

Answer 1

讓透明圖像決定DIV尺寸。
在那個 div 中放置相同的圖像，CSS opacity: 0

jsBin 演示

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
</div>

將該圖像設置為

#mainHeaderWrapper {
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img {
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}

這樣 DIV 的高度將由包含的不可見圖像決定，並且將background-image設置為中心、完整（ 50% / 100% ）它將匹配該圖像的比例。

需要該 DIV 中的一些內容嗎？

jsBin 演示由於包含圖像，您將需要一個額外的子元素，將設置為position: absolute作為覆蓋元素

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
   <div>Some content...</div>
</div>

#mainHeaderWrapper{
    position: relative;
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

Answer 2

如果您知道圖像的比例，請使用百分比填充來定義容器的高度。 設置height:0並將垂直填充設置為寬度的百分比。

這種方法的關鍵是基於百分比的垂直填充始終與寬度相關。

根據盒子模型（w3.org） ：

百分比是根據生成的框的包含塊的寬度計算的，即使對於“padding-top”和“padding-bottom”也是如此。

下面的圖片是400px X 200px，所以高寬比例為1:2， padding-top設置為50%；

 #mainHeaderWrapper { width: 100%; height: 0; padding-top: 50%; background-image: url('https://dummyimage.com/400x200/'); background-size: 100% auto; background-repeat: no-repeat; }

 <div id="mainHeaderWrapper"></div> stuff below the image

在另一個示例中，圖像為 300 像素 X 100 像素。 高度是寬度的 1/3，所以padding-top設置為 33.33%：

 #mainHeaderWrapper { width: 100%; height: 0; padding-top:33.33%; background-image: url('https://dummyimage.com/300x100/'); background-size: 100% auto; background-repeat: no-repeat; }

 <div id="mainHeaderWrapper"></div> stuff below the image

---

編輯：

按照Paulie_D的提示，div中的其他內容必須絕對定位，如下所示。 我建議也使用百分比來定位這些元素。

 #mainHeaderWrapper { width: 100%; height: 0; padding-top: 33.33%; background-image: url('https://dummyimage.com/300x100/'); background-size: 100% auto; background-repeat: no-repeat; } div#inner_content { position: absolute; top: 0; width: 100%; margin-top: 10%; color: #FFF; text-align: center; font-size: 20px; }

 <div id="mainHeaderWrapper"> <div id="inner_content">Hello World</div> </div> stuff below the image

Answer 3

這可以在不使用虛擬圖像的情況下完成。 例如，我將使用我剛剛使用的圖像的尺寸。

我的圖像尺寸為 2880x1410。 簡化尺寸 -> 96/47（我使用了這個簡單的比率計算器http://andrew.hedges.name/experiments/aspect_ratio/ ）。 得到簡化的比率后，將高度和寬度代入方程：

高度：計算（（100vw * W）/ H）； 所以我的會讀：高度：calc((100vw * 47) / 96);

也無需擔心 div 的內容（除非它們不合適）

Answer 4

 body{ margin: 0; padding: 0} #box1{ background: url(http://lorempixel.com/400/200/food/); background-size: cover; background-attachment: fixed; margin: 0; width: 100%; height: 100vh; display: table; } h1{ color: #ffffff; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-size: 38px; text-align: center; font-weight: normal; background: rgba(0,0,0,0.3); display: table-cell; vertical-align: middle}

 <div id="box1"> <h1>Code Bluster BILU </h1> </div>