如何使CSS背景图像响应

如何使CSS背景图像响应

本文介绍了如何使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:

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

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

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

07-24 18:30