如何使CSS背景图像响应？ [英] How to make CSS background-image responsive?

问题描述

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

回应css背景图片

Ok, so I came across this solution to making background-image responsive:
Responsive css background images

我对于重新张贴问题的道歉，但实际上他们的解决方案都不适合我。

My apologies for re-posting the question, but literally none of their solutions worked for me.

HTML：

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

CSS：

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

JSFiddle：
http://jsfiddle.net/u4768dfq/1/

我该如何做到这种敏感？例如当页面宽度小于图片宽度时，它会正确缩放。

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.

推荐答案

高度 #fourohfour_home ，以便背景图片知道要包含在中的哪个容器。像：

You simply need to define width and height of #fourohfour_home in order for the background image to know in what container to be contained. Something like:

#fourohfour_home{
    background-image:url('https://www.pandoragaming.net/img/404_home.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    height: 120px;
    width: 20%;
}

JSFiddle with example

JSFiddle with example

这篇关于如何使CSS背景图像响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！