如何使 CSS 背景图像响应？ [复制]答案

【问题标题】：How to make CSS background-image responsive? [duplicate]如何使 CSS 背景图像响应？ [复制]
【发布时间】：2014-10-20 08:28:48
【问题描述】：

好的，所以我遇到了这个使背景图像响应的解决方案：
Responsive css background images

我很抱歉重新发布这个问题，但实际上他们的解决方案都不适合我。

HTML：

<div id="fourohfour_home"></div>

CSS：

#fourohfour_home {
    background-image:url('image.png');
    height:120px;
    width:120px;
}

我究竟该如何做出响应？例如当页面宽度小于图像宽度时，它会正确缩放。

【问题讨论】：

请看问题？我用那个帖子澄清了情况。
如果您指定高度和宽度，容器将无法响应 - 它具有固定大小。您必须使用百分比，请参阅其他问题
div 元素具有默认高度：0px。您必须设置元素的高度，例如到100vh。
我没有看到任何关于副本如何不适合您的说明。
我也没有。特别是当您的 div 在此处定义其尺寸时：height:120px;width:120px;

标签： html css responsive-design background-image

【解决方案1】：

您只需定义#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%;
}

【讨论】：

完美运行，谢谢。只是检查;如果我也想要动态高度，我认为 Javascript 将是唯一的选择？
很可能。但在上下文之外很难说。如果答案对您有用，请不要忘记接受它，而不仅仅是投票，以便其他人了解有效的解决方案;)
对我来说太快了。甚至没有时间发布我的答案！哈！

【解决方案2】：

你应该use media queries as always，然后设置背景的尺寸：

@media all and (max-width: 639px) and (min-width: 320px) {
    #fourohfour_home {
        background-size: 320px 240px;
    }
}

在这个例子中，我改变了你给的图像的大小，对于宽度小于 640 的情况。如果它更大，我使用另一个分辨率：

@media all and (max-width: 799px) and (min-width: 640px) {
    #fourohfour_home {
        background-size: 640px 480px;
    }
}

如果我想要分辨率更高的图像，我什至可以更改图像：

@media all and (max-width: 799px) and (min-width: 640px) {
    #fourohfour_home {
        background-image: url('my-image-640.png');
        background-size: 640px 480px;
    }
}

编辑这属于同一个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 */
}

【讨论】：

【解决方案3】：

为了提高响应速度，您通常必须使用百分比而不是像素值。因此，如果您将元素的高度和宽度设置为 100%，并将其父元素的 all 设置为您想要的完整高度和宽度（包括 html 和正文），来自另一个问题的代码应该可以工作。试试http://goo.gl/2GrwyR

【讨论】：