[問題] 關於div中img的等比例縮放

[aqua901 (隨便啦)]

我正在研究自適應網頁，

網頁中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就是這樣的技術)

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 106.104.4.124
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1507280696.A.462.html
推 soft2165: padding-bottom 的數字，是你想要的比例。換算成百分比
→ soft2165: 。例如16:9 , 9除16*100 = 56.25。 padding-bottom 就
→ soft2165: 填入56.25%，就是16:9的比例。以此類推。
推 jmlntw: 圖片的長寬比。
推 sanyaoooo: padding bottom和padding top設%數的話，都是抓本身的
→ sanyaoooo: 寬度去算的，所以可以用來做固定長寬比的物件