转自：巧用margin/padding的百分比值实现高度自适应
设置容器的padding-bottom/top
处理列表中响应式图片的时候，宽度可以设置百分比进行自适应，
但是高度没办法控制 ，如果图片宽高不一致，宽度设置一样，高度会参差不齐
这时就可以使用padding来控制图片的高度，让列表中的图片强制设置同一高度
div的宽度是相对父级100%，想设置div的显示宽度，只能设置父级的宽度，而不能设置自身的宽度
1 : 图片使用盒子包裹，案例为 .img-box
2 : img-box的高度用padding-top/padding-bottom 撑开
padding-top的值是 （图片高 / 图片宽 * 100%）
并设置为绝对定位 position : releteve
3 : 图片设置相对定位 position : absolute
并宽高为 100%
.img-box { 100%; /* 596*586*100% */ padding-bottom: 101%; } .img-box img { 100%; height: 100%; position: absolute; top: 0; left: 0; }
<div class="img-box"> <!-- 图片宽度 132 * 234 --> <img src="./images/bird.png" alt=""> </div>
第二种方法；涉及到max-height的使用，使用伪元素撑开容器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ 50%;background: #f0a099;display: inline-block; overflow: hidden;/*需要出发BFC消除margin折叠的问题*/ } .box-i:after{ content: ''; display: block; margin-top: 100%;/*margin百分比相对于父元素的宽度计算*/ } img{ position: absolute;;top: 0; 100%;height: 100%; } </style> </head> <body> <!--另外，使用margin的话需要考虑margin折叠的问题,padding没有此烦恼--> <div class="box-i" id="box"></div> </body> </html>