[英]Scale div to fit background image
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.我有一个带有背景图像的 div,我想扩展 100% 的宽度并自动缩放 div 以适应图像所需的高度。 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 高度,但它只是拉伸到屏幕的整个高度,而我希望它缩放到图像的高度。
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感谢您的任何帮助
Let a transparent image dictate the DIV
dimensions.让透明图像决定
DIV
尺寸。
Inside that div put the same image with CSS opacity: 0
在那个 div 中放置相同的图像,CSS
opacity: 0
<div id="mainHeaderWrapper">
<img src="path/to/image.jpg"><!-- I'm invisible! -->
</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, and having the background-image
set to center, full ( 50% / 100%
) it will match that image's proportions.这样 DIV 的高度将由包含的不可见图像决定,并且将
background-image
设置为中心、完整( 50% / 100%
)它将匹配该图像的比例。
jsBin demo Due to the containing image, you'll need an extra child element that will be set to position: absolute
acting as an overlay element 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%;
}
If you know the proportions of the image, use percentage padding to define the height of the container.如果您知道图像的比例,请使用百分比填充来定义容器的高度。 Set
height:0
and 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 width of 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-top
is set to 50%;下面的图片是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
In another example, the image is 300px X 100px.在另一个示例中,图像为 300 像素 X 100 像素。 The height is ⅓ of the width, so the
padding-top
is set to 33.33%:高度是宽度的 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
As prompted by Paulie_D, other content in the div must be positioned absolutely, demonstrated below.按照Paulie_D的提示,div中的其他内容必须绝对定位,如下所示。 I suggest positioning these elements using percentages, as well.
我建议也使用百分比来定位这些元素。
#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
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.我的图像尺寸为 2880x1410。 Simplify the dimensions -> 96/47 (I used this simple ratio calculator http://andrew.hedges.name/experiments/aspect_ratio/ ).
简化尺寸 -> 96/47(我使用了这个简单的比率计算器http://andrew.hedges.name/experiments/aspect_ratio/ )。 Once you have the simplified ratio, plug the height and width to the equation:
得到简化的比率后,将高度和宽度代入方程:
height: calc((100vw * W) / H);高度:计算((100vw * W)/ H); So mine would read: height: calc((100vw * 47) / 96);
所以我的会读:高度:calc((100vw * 47) / 96);
No need to worry about the contents of the div either (unless they dont fit)也无需担心 div 的内容(除非它们不合适)
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.