css百分比实现响应式布局图片

通常一些轮播，或者一些顶部的封面图都需要根据设备宽度来调整图片显示的大小，而不是写死容器高度。如下图

image.png

image.png

所以可以通过如下方式实现，

position: relative;
width: 100%;
height: 0;
padding-top: 40%;

然后子元素

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

其中padding-top中的百分比是按照父元素的宽度的百分比计算的，比如父元素width为375px，则padding-top: 150px

关于css样式的百分比都相对于谁，可以看看知乎上面的讨论https://www.zhihu.com/question/36079531