一、需求场景
最近做项目时使用到响应式布局，页面的列表内容宽度随着浏览器窗口的变大而变大，并且列表页面主要是图片+标题，需求又要保证图片的等比例缩放。因此就引发了如何在宽度改变的情况下，保持图片高度的等比例缩放或拉伸呢？
思路：1：在window.resize()方法中动态获取元素的宽度，然后根据比例动态计算高度值。按道理也是可行的，但是网页再窗口的缩放过程中，对页面上的每个图片都要进行重新计算，页面开销较大，性能不好。
2：有没有可能通过css实现图片的宽高比固定，然后高度随着宽度的变化自适应呢？一顿网上查找资料，终于发现通过padding可以设置宽高比固定的元素，对自适应布局很友好，并且兼容性很好。
二、padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。
padding可能的值有两种：（1）定义一个固定的填充(像素, pt, em,等) （2）使用百分比值定义一个填充
注意：在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。
因此，对于padding属性而言，任意方向的百分比padding都相对于宽度计算可以让我们轻松实现固定比例的块级容器。假设现在有个<div>元素：
div { padding-bottom: 100%; }
这样即可实现一个宽高1:1正方形。他的宽度无论改变多少，都能保持宽高1:1不变。
三、图片等比例自适应布局实现
假设现在要求图像显示比例为16:9。首先定义一个16:9的父级容器:
div {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img父级的内容高度实际是零，它所占据的实际高度是padding撑开的，补充一下padding值与图片宽高的计算：
(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width
图片img的css设置为：
div > img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
其中object-fit: cover;可以保持图片的等比例缩放。 这样即可实现图片在自适应布局时的等比例缩放，效果及兼容性都较好。
