如何使CSS背景图像响应？

Question

好的,所以我遇到了这个使背景图像响应的解决方案:
响应式css背景图像

我很抱歉重新发布这个问题,但实际上他们的解决方案都没有对我有用.

HTML:

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

CSS:

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

我究竟如何做出这种响应？例如,当页面的宽度小于图像的宽度时,它会正确缩放.

Answer 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%;
}