2 sinat 32546159 sinat_32546159 于 2016.03.04 17:36 提问

背景图随着容器的宽度的改变而自动调整大小,并始终完全显示

插入一幅背景图像,如何让它随浏览器自动调整大小,始终保持完全显示?

2个回答

showbo
showbo   Ds   Rxr 2016.03.04 18:09
已采纳

用会h5的background-size:100%,IE8-不支持,要兼容ie8-思路就是父容器relative定位,放个img加载图片,absolute定位,

<div style="background-image:url(http://avatar.csdn.net/E/8/7/2_sinat_32546159.jpg);background-size:100%;height:300px;width:300px">
    H5 CSS background-size
</div>

<div style="position:relative;height:300px;width:300px">
    兼容IE8-和所有浏览器
    <img src="http://avatar.csdn.net/E/8/7/2_sinat_32546159.jpg" style="width:100%;height:100%;z-index:-1;position:absolute;left:0;top:0"/>
</div>
WinsenJiansbomber
WinsenJiansbomber   2016.03.05 15:36

样式表

html, body, #image_target {width:100%,height:100%;}
#image_target {position:absolute;top:0;left:0;}

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!