首页 > 代码库 > 图片自适应缩放

图片自适应缩放

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%,宽度自适应缩放。

图片自适应缩放