Html 缩放 div 以适合背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30035530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scale div to fit background image
提问by Al Hennessey
I have a div with a background image that I want to expand 100% width and auto scale the div to fit the required height of the image. At the moment it is not scaling the div height unless I set the height of the div to 100% but then it just stretches to the full height of the screen, whereas I want it to scale to the height of the image.
我有一个带有背景图像的 div，我想扩展 100% 的宽度并自动缩放 div 以适应图像所需的高度。目前，除非我将 div 的高度设置为 100%，否则它不会缩放 div 高度，但它只是拉伸到屏幕的整个高度，而我希望它缩放到图像的高度。
Here is the html:
这是html：
<div id="mainHeaderWrapper">
</div><!--end mainHeaderWrapper-->
<br class="clear" />;
Here is the css:
这是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; }
Thanks for any and all help
感谢您的任何帮助
回答by Roko C. Buljan
Let a transparent image dictate your DIVdimensions.
让透明图像决定您的DIV尺寸。
Inside that div put the same image
在那个 div 里面放相同的图像
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! yey!-->
</div>
set that image to
将该图像设置为
#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 */
}
That way the height of the DIV will be dictated by the containing invisible image,
Having the background-imageset to center, full(50% / 100%) it will match that image's proportions.
这样的DIV的高度将被包含无形的形象来决定，
具有background-image设置为中心，全（50% / 100%）将匹配图像的比例。
Not sure if you want to manipulate the colors of the background-imageor what (using CSS3 filter), but now after reading again what I wrote...
Isn't it simpler to simply put an image inside a DIV? :)
不确定您是否要操纵背景图像的颜色或什么（使用 CSS3 filter），但现在再次阅读我写的内容后......
简单地将图像放入 DIV 不是更简单吗？:)
Need some content inside that DIV?
需要该 DIV 中的一些内容吗？
jsBin demoDue to the containing image, you'll need an extra child element that will be set to position:absoluteand act as an overlay element
jsBin 演示由于包含图像，您将需要一个额外的子元素，该子元素将被设置为position:absolute并充当覆盖元素
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! yey!-->
<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%;
}
回答by showdev
If you know the proportions of the image, use percentage padding to define the height of the container. Set height:0and set vertical padding to a percentage of the width.
如果您知道图像的比例，请使用百分比填充来定义容器的高度。设置height:0垂直填充并将其设置为宽度的百分比。
They key to this method is that percentage-based vertical padding is always related to width.
这种方法的关键是基于百分比的垂直填充始终与宽度相关。
According to the box model (w3.org):
根据盒子模型（w3.org）：
The percentage is calculated with respect to the widthof the generated box's containing block, even for 'padding-top' and 'padding-bottom'.
百分比是根据生成的框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。
Below, the image is 400px X 200px, so the proportion of height to width is 1:2 and padding-topis set to 50%;
下图，图片为400px X 200px，所以高宽比例为1:2，padding-top设置为50%；
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top:50%;
background-image: url(//lorempixel.com/400/200/abstract/1/);
background-size: 100% auto;
background-repeat: no-repeat;
}<div id="mainHeaderWrapper"></div>
stuff below the imageIn another example, the image is 300px X 100px. The height is ⅓ of the width, so the padding-topis set to 33.33%:
在另一个示例中，图像为 300 像素 X 100 像素。高度是宽度的 1/3，所以padding-top设置为 33.33%：
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top:33.33%;
background-image: url(//lorempixel.com/300/100/abstract/1/);
background-size: 100% auto;
background-repeat: no-repeat;
}<div id="mainHeaderWrapper"></div>
stuff below the imageEdit:
编辑：
As prompted by Paulie_D, other content in the div must be positioned absolutely, demonstrated below. I suggest positioning these elements using percentages, as well.
按照Paulie_D的提示，div中的其他内容必须绝对定位，如下所示。我建议也使用百分比来定位这些元素。
#mainHeaderWrapper {
width: 100%;
height: 0;
padding-top: 33.33%;
background-image: url(//lorempixel.com/300/100/abstract/1/);
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回答by user3614509
This can be done without using a dummy image. I will use dimensions of an image I just worked with for example.
这可以在不使用虚拟图像的情况下完成。例如，我将使用我刚使用过的图像的尺寸。
The dimensions of my image are 2880x1410. Simplify the dimensions -> 96/47 (I used this simple ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/). Once you have the simplified ratio, plug the height and width to the equation:
我的图像尺寸为 2880x1410。简化尺寸 -> 96/47（我使用了这个简单的比率计算器http://andrew.hedges.name/experiments/aspect_ratio/）。得到简化的比率后，将高度和宽度代入方程：
height: calc((100vw * W) / H); So mine would read: height: calc((100vw * 47) / 96);
高度：计算（（100vw * W）/ H）；所以我的会读：高度：calc((100vw * 47) / 96);
No need to worry about the contents of the div either (unless they dont fit)
也无需担心 div 的内容（除非它们不合适）
回答by bilu sau
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>