1、padding-bottom 如果用%来表示的话，计算是根据父元素的width的值进行计算的。
例：父元素.wrapper的width是100px，height设置为0, padding-bottom的值是50%，则该元素的高是50px
2、 百分比方法适用于的场景：一个图片需要全部显示出来，而且图片本身的宽高比例不变，能够随着屏幕的大小进行变化。
3、实现等比缩放的效果，还可以通过vw来设置，缺点：有的浏览器不支持。
下面是例子中css.wrapper中可以替换为
.wrapper{
width: 100%;
height: 26.66vw;
}
下面例子可以通过屏幕的缩放来等比的改变图片的宽高。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding-bottom</title> <style type="text/css" rel="stylesheet"> .wrapper{ width: 100%; height: 0; /*padding-bottom的值是基于父元素的width来计算的,则padding-bottom=100%/3.75=26.66% */ padding-bottom: 26.66%; overflow: hidden; } .content{ position: relative; width: 100%; } </style> </head> <body> <div class="wrapper"> <!-- 子元素的图片的宽为375px,高为100px,则算出来的宽高比为375/100=3.75 --> <img class="content" src="http://img1.qunarzz.com/piao/fusion/1806/1c/4847ea66072c7b02.jpg_750x200_c32457fb.jpg" alt="图片"> </div> </body> </html>
文章来源：https://www.cnblogs.com/yuxingyoucan/p/9256544.html
原文：https://www.cnblogs.com/jerryspace/p/11194524.html