css实现div中图⽚⾼度⾃适应并与⽗级div宽度⼀致
需求：1.⽗级div不设置⾼度
  　2.图⽚⾼度⾃适应，并且显⽰为正⽅形；
以前遇到列表中图⽚⾼度必须和⽗级宽度相同，并且需要为正⽅形的时候，最开始的⽅法是定死图⽚⾼度，这样会导致不同分辨率下图⽚会压缩，后来傻傻的⽤js来控制图⽚的⾼度，直到现在才明⽩⼏句css就能搞定，并且完全符合要求。。。。。。
例⼦：
margin属性值可以为百分比
1.html
<ul>
<li class="bli">
<div class="imgbox">
<img src="upimg/comm.png"/>
</div>
<p>喵喵喵喵喵喵111</p>
</li>
<li class="bli">
<div class="imgbox">
<img src="upimg/comm1.png"/>
</div>
<p>喵喵喵喵喵喵222</p>
</li>
<li class="bli">
<div class="imgbox">
<img src="upimg/comm2.png"/>
</div>
<p>喵喵喵喵喵喵333</p>
</li>
</ul>
2.css
ul{
overflow: hidden;
}
.bli{
float: left;
width: 49%;
margin:0 2% 2% 0;
background: white;
outline: 1px solid red;
}
.bli:nth-child(even){
margin-right: 0;
}
.imgbox{
position: relative;
overflow: hidden;
padding-bottom: 100%;/*重要属性*/
outline: 1px solid green;
}
.imgbox img{
width: 100%;
position: absolute;
}
说明：装图⽚的盒⼦imgbox，设置的padding-bottom，当该值为百分⽐属性时，是基于⽗元素宽度的百分⽐，所以这⾥设置100%的时候，就相当于形成了⼀个正⽅形。
  　当然，也可以设置padding-top。这时img就需要设置top:0；了。记得img要设置100%宽度哦。
  　这个⽅式和js的先获取⽗级div宽度再设置图⽚⾼度相⽐⽅便太多太多了。
效果图：
上⾯所有li的⾼度都未定死，但是都是⼀样的⾼度，图⽚很长或者很宽，都不影响布局，主要是overflow:hidden隐藏了。这样设置之后，页⾯不管怎么变化，图⽚⾼度也会动态随之变化。
扩展：如果想实现，宽⾼⼀定⽐例⽐如16:9，宽度⾃适应100%的div呢？
再啰嗦⼀句：padding当为百分⽐属性时，是基于⽗元素宽度的百分⽐的。
那么：我设置宽度为100%的时候，按⽐例算，⾼度⼤致就是（100% * 9）/16  ，这样算的话，padding-bottom的值就是56%
1.html
<div class="box">
<img src="upimg/comm.png"/>
</div>
<div class="box">
<img src="upimg/comm1.png"/>
</div>
<div class="box">
<img src="upimg/comm2.png"/>
</div>
以上是3张图⽚，每个图⽚的⼤⼩分别是：216X216，330X180，180X330
2.CSS
.box{
width: 100%;
margin: 20px auto;
background: skyblue;
position: relative;
padding-bottom: 56%;      //这是重要属性
overflow: hidden;
}
.
box>img{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
效果：
在398px宽度的时候，⾼度都为222.88px，算下来⽐例就是16:9
在浏览器宽度发⽣变化时，能⾃适应百分百宽度，并且保证⽐例不会变化
注：也可以设置图⽚⾼度为100%，我上⾯未设是因为原图⽐例不是16:9，设置100%⾼度会被压缩

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。