CSS 是否可以使用背景图像制作响应式 div，该背景图像保持背景图像的比例，就像 <img> 一样？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15883157/
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
Is it possible to make a responsive div with a background-image that maintains the ratio of the background-image like with an <img>?
提问by Ketri
Not a a native english speaker so there's probably a better way to shape the question...anyway:
不是母语为英语的人，所以可能有更好的方法来塑造问题......无论如何：
What I want to create is similar to the header here: http://thegreatdiscontent.com/adam-lisagorThe header image is shown fully in all screensizes, and the aspect-ratio of the image is of course always correct. This is made using an and getting the text to appear on the using position: absolute.
我想要创建的类似于此处的标题：http: //thegreatdiscontent.com/adam-lisagor标题图像在所有屏幕尺寸中都完全显示，并且图像的纵横比当然总是正确的。这是使用 an 并使文本出现在 using position: absolute 上的。
But if you use css for the background-image instead of an , you'll get something like this header: http://elegantthemes.com/preview/Harmony/Resize browser to see parts of the background being left out.
但是，如果您将 css 用于背景图像而不是 ，您将得到类似以下标题的内容：http: //elegantthemes.com/preview/Harmony/调整浏览器大小以查看部分背景被遗漏。
Is it possible to make a a div look and behave like the first link, using the background-image css property like on the second link? Or do I have to change how my entire header works and use the for the background for it to show fully in all screensizes?
是否可以使用第二个链接上的 background-image css 属性使 aa div 的外观和行为类似于第一个链接？或者我是否必须更改我的整个标题的工作方式并使用背景使其在所有屏幕尺寸中完全显示？
I would like to have a header background that doesn't leavy anything out, but is fixed like this http://getflywheel.com/Only idea so far is to make a transparent png that has the correct ratio of the image, and then use background-image that has background-attachment:fixed. But this doesn't seem very smart.
我想要一个不会留下任何东西的标题背景，但像这样固定http://getflywheel.com/到目前为止唯一的想法是制作一个具有正确图像比例的透明 png，然后使用具有 background-attachment:fixed 的背景图像。但这似乎不是很聪明。
Hopefully I was clear enough that I'll get understood. Thank you all very much in advance!
希望我足够清楚，我会被理解。非常感谢大家提前！
回答by Yassin
Here is a nice and simple tip with only css/html:
这是一个仅包含 css/html 的漂亮而简单的提示：
Ingredients
原料
Transparent PNG image with the desired ratio (transparent-ratio-conserver.png)
tag
Different images for different view-ports (retina.jpg, desktop.jpg, tablet.jpg...)
具有所需比例的透明 PNG 图像 (transparent-ratio-conserver.png)
标签
不同视口的不同图像（retina.jpg、desktop.jpg、tablet.jpg...）
The idea is to open an tag and to assign to it a transparent image (with our desired ratio). We also add class="responsive-image" that's all in HTML.
这个想法是打开一个标签并为其分配一个透明图像（具有我们想要的比例）。我们还添加了所有在 HTML 中的 class="responsive-image"。
<img src="img/transparent-ratio-conserver.png" class="responsive-image">
In the CSS, we set background-size to fit the and we choose the width of our image.
在 CSS 中，我们设置了 background-size 以适合我们并选择图像的宽度。
.responsive-image{
width: 100%;
background-size: 100% 100%;
}
and finally, we serve for every view-port the right image:
最后，我们为每个视口提供正确的图像：
/* Retina display */
@media screen and (min-width: 1024px){
.responsive-image{
background-image: url('../img/retina.jpg');
}
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
.responsive-image{
background-image: url('../img/desktop.jpg');
}
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
.responsive-image{
background-image: url('../img/tablet.jpg');
}
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
.responsive-image{
background-image: url('../img/mobile-hd.jpg');
}
}
/* Mobile LD */
@media screen and (max-width: 350px){
.responsive-image{
background-image: url('../img/mobile-ld.jpg');
}
}
You can download the demo from here.
您可以从这里下载演示。
回答by Bill
This is done with the background-size property:
这是通过 background-size 属性完成的：
background-size: cover;
Cover will make the image as small as it can be, whilst still covering the entirety of its parent, and maintaining its aspect ratio.
Cover 将使图像尽可能小，同时仍覆盖其整个父级，并保持其纵横比。
You may also want to try contain, which makes the image as big as it can be whilst still fitting inside the parent.
您可能还想尝试contain，这可以使图像尽可能大，同时仍然适合父级。
Source(s)
来源
回答by CranK
I think theres a better solution than containor cover(which dind't work for me, btw).
Here's an example I recently used for a logo:
我认为有比containor更好的解决方案cover（顺便说一句，这对我不起作用）。这是我最近用于徽标的示例：
#logo{
max-width: 600px;
min-height: 250px;
margin: 0 auto;
background: url(../images/logo.png) no-repeat center;
background-size: 100%;
}
So now we have a responsive div with a backgound image, which size is set to the full width of the div.
所以现在我们有一个带有背景图像的响应式 div，其大小设置为 div 的全宽。
回答by rajesh_kw
Although there are other solutions. % will scale the div to image size or the aspect ratio.
虽然还有其他解决方案。% 将 div 缩放到图像大小或纵横比。
.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
}
}
回答by lonewarrior556
You just need to pass the height to width ratio to the element. For an image 1400x600;
您只需要将高宽比传递给元素。对于 1400x600 的图像；
1400:600 = 98:42
1400:600 = 98:42
span( style="padding-bottom:42%;
width:98%;
background:url('/images/img1.jpg');
background-size:contain;
display:inline-block;")
would display the same as
将显示与
img(src="/images/img.jpg" style="width:98%;")
