图片自适应缩放

1、img元素

　　img{max-width: 100%; height: auto;}

 

2、背景图片

通过修改背景图片宽度高度达到适应显示。

使用到css3的background-size，只支持IE9以上版本及现代浏览器。

background-size: percentage | length | cover | contain;

　　length: 设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度；如果只有一个值，则第二个值会被设置auto。

　　percentage: 以父元素的百分比来设置背景图像的高度和宽度。

　　cover: 扩展背景图像完全覆盖背景区域。

　　contain: 把背景图像扩展到最大尺寸，以使其高度和宽度完全适应内容区域。

 background-size: 100% auto;按照父元素宽度100%,高度自适应缩放；同理background-size: auto 100%;按照父元素高度100%,宽度自适应缩放。

转载于:https://www.cnblogs.com/wanbi/p/4182833.html