我正在研究自适应网页，
网页中img可以随视窗做等比缩放，这是大家都知道的技术，
但是我想在图片上加上文字，所以就把图片放进background里面。
但是放background-img的div高度如果写死，就无法做等比缩放了....
只能在不同的viewport中一个一个修改....
后来我看到有个自适应网页用以下的做法：
width: 100%;
background: url("../img/xxxx.jpg") center top no-repeat;
background-size: cover;
height: 0;
padding-bottom: 40%;
它的height是0
加上padding-bottom就可以达到background-img也可以等比例缩放的效果，
这是我的范例：
https://goo.gl/SgBcjR
那个网页的原始padding-bottom是给padding-bottom: 32.64286%;
但我不知道“32.64286%”它是怎么计算出来的，
40%是我自己乱设定的。
也就是说我并不是很清楚这个写法的原理，
请问有人知道吗？谢谢。
顺便附上我参考原始网页的连结：
https://recruit.alhinc.jp/interview/ayako-hironaga/
(最上方区块div.media_interview_detail_eyecatch interview-8就是这样的技术)

padding-bottom 的数字，是你想要的比例。换算成百分比。例如16:9 , 9除16*100 = 56.25。 padding-bottom 就填入56.25%，就是16:9的比例。以此类推。

图片的长宽比。

padding bottom和padding top设%数的话，都是抓本身的宽度去算的，所以可以用来做固定长宽比的物件