首页 > 其他 > 详细

图片自适应缩放

时间:2014-12-25 00:01:19      阅读:414      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!