图片容器宽高比设置的优化方案

div {  

    width: 100%; 

    position: relative; // 使用相对定位 

    height: 0; // 高度设置为0,使用padding来设置高度 

    overflow: hidden; 

    padding-bottom: 80%; // 使用padding-top也可,使用padding来撑高容器,高度为宽度80%

}

div img { 

     position: absolute; // 使用绝对定位 

     width: 100%; // 宽高为容器的宽高 

     height: 100%; 

     top: 0; 

     left: 0

}

<div>

<img src="http://blog.sina.com.cn/s/articlelist_5174220434_0_1.html"/>

</div>

优点:当图片加载不出来的时候,容器的位置不会消失;不需要使用js就能解决图片比例控制问题。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,843评论 1 45
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,923评论 0 1
  • 她是农村娃,大山里的孩子。山区里,没有马路,没有车,用不了扁担,有的是人,是背篓。 她六岁时,妹妹出生了,大一点了...
    秭归橙子和水果阅读 1,896评论 2 3
  • 从0到现在,一周过去了。经历了>7个不眠夜。 只希望如我所愿!
    noopyer阅读 240评论 0 0