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

图片保持比例,padding的妙用

时间:2017-04-15 01:24:05      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:使用   参考   style   移动   src   分辨率   百分比   alt   logs   

 要保持图片的比例不变

技术分享技术分享技术分享

 

 这一张图片在不同分辨率(1980px, 1364px,移动端400px)下均保持了一定的比例不变。

方法:技术分享

padding以及margin的上下(margin-top | margin-bottom | padding-top | padding-bottom)使用百分比时。参考的是容器的宽度。注意不是容器的高度。

容器使用width:100% ,这样容器的高度由padding-top撑开,高度为宽度的35%。这样图片的比例始终是 100:35 不会变形。

 

图片保持比例,padding的妙用

标签:使用   参考   style   移动   src   分辨率   百分比   alt   logs   

原文地址:http://www.cnblogs.com/lijinwen/p/6711496.html

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