码迷,mamicode.com
首页 > 其他好文 > 详细

图片自适应缩放

时间:2014-12-25 00:03:08      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

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

图片自适应缩放

标签:

原文地址:http://www.cnblogs.com/wanbi/p/4182833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!