Html 如何使 CSS 背景图像响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25515553/
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
How to make CSS background-image responsive?
提问by user3420034
Ok, so I came across this solution to making background-image responsive:
Responsive css background images
好的，所以我遇到了这个使背景图像响应的解决方案：
Responsive css background images
My apologies for re-posting the question, but literally none of their solutions worked for me.
我很抱歉重新发布这个问题，但实际上他们的解决方案都没有对我有用。
HTML:
HTML：
<div id="fourohfour_home"></div>
CSS:
CSS：
#fourohfour_home {
background-image:url('image.png');
height:120px;
width:120px;
}
How exactly would I make this responsive? e.g. When the width of the page is less than the width of the image it scales correctly.
我究竟要如何使这个响应？例如，当页面的宽度小于图像的宽度时，它会正确缩放。
回答by spliter
You simply need to define width and height of #fourohfour_homein order for the background image to know in what container to be contained. Something like:
您只需要定义宽度和高度，#fourohfour_home以便背景图像知道在哪个容器中contained。就像是：
#fourohfour_home{
background-image:url('https://www.example.com/img/404_home.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
height: 120px;
width: 20%;
}
回答by Luis Masuelli
You should use media queries as always, and then set the dimensions for the background:
你应该像往常一样使用媒体查询，然后设置背景的尺寸：
@media all and (max-width: 639px) and (min-width: 320px) {
#fourohfour_home {
background-size: 320px 240px;
}
}
In this example, I changed the size of an image you gave, for the case that the width is few than 640. if it is greater, I use another resolution:
在这个例子中，我改变了你给出的图像的大小，对于宽度小于 640 的情况。如果它更大，我使用另一个分辨率：
@media all and (max-width: 799px) and (min-width: 640px) {
#fourohfour_home {
background-size: 640px 480px;
}
}
I could even change the image, if I wanted an image with better resolution:
如果我想要分辨率更高的图像，我什至可以更改图像：
@media all and (max-width: 799px) and (min-width: 640px) {
#fourohfour_home {
background-image: url('my-image-640.png');
background-size: 640px 480px;
}
}
Editthis belongs to the same css definition:
编辑这个属于同一个css定义：
/* for default - too short - size */
@media all and (max-width: 319px) {
#fourohfour_home {
background-image: url('my-image-very-small.png'); /*in the case you have another image for this resolution - usually you'll never have these sizes as for today*/
background-size: 200px 150px;
}
}
@media all and (max-width: 639px) and (min-width: 320px) {
#fourohfour_home {
background-image: url('my-image-320.png'); /*in the case you have another image for this resolution*/
background-size: 320px 240px;
}
}
@media all and (max-width: 799px) and (min-width: 640px) {
#fourohfour_home {
background-image: url('my-image-640.png'); /*in the case you have another image for this resolution*/
background-size: 640px 480px;
}
}
@media all and (max-width: 1023px) and (min-width: 800px) {
#fourohfour_home {
background-image: url('my-image-800.png'); /*in the case you have another image for this resolution*/
background-size: 800px 600px;
}
}
/* this one goes for default images - bigger sizes */
@media all and (min-width: 1024px) {
#fourohfour_home {
background-image: url('my-image-1024.png'); /*in the case you have another image for this resolution*/
background-size: 1024px 768px;
}
}
/* this will have no @media, so will apply for every resolution */
#fourohfour_home {
background-repeat:no-repeat;
background-position:center;
width: 100%; /* assuming you want to expand your div in a screen-dependent way */
}
回答by Zak
In order for responsiveness, you often have to use percentages instead of pixel values. So, if you set the height and width for the element to 100% and set allof its parent elements to the full height and width that you want them (including html and body), the code from the other question should work. Try http://goo.gl/2GrwyR
为了响应性，您通常必须使用百分比而不是像素值。因此，如果您将元素的高度和宽度设置为 100%，并将其所有父元素设置为您想要的完整高度和宽度（包括 html 和正文），则另一个问题中的代码应该可以工作。试试http://goo.gl/2GrwyR
