我正在研究自適應網頁，
網頁中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設%數的話，都是抓本身的寬度去算的，所以可以用來做固定長寬比的物件