需求：1.父级div不设置高度
2.图片高度自适应，并且显示为正方形；
以前遇到列表中图片高度必须和父级宽度相同，并且需要为正方形的时候，最开始的方法是定死图片高度，这样会导致不同分辨率下图片会压缩，后来傻傻的用js来控制图片的高度，直到现在才明白几句css就能搞定，并且完全符合要求。。。。。。
例子：
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%高度会被压缩