[問題] 關於div中img的等比例縮放
我正在研究自適應網頁，
網頁中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
推
10/06 20:53,
6年前
, 1F
10/06 20:53, 1F
→
10/06 20:53,
6年前
, 2F
10/06 20:53, 2F
→
10/06 20:53,
6年前
, 3F
10/06 20:53, 3F
推
10/06 20:53,
6年前
, 4F
10/06 20:53, 4F
推
10/06 21:11,
6年前
, 5F
10/06 21:11, 5F
→
10/06 21:11,
6年前
, 6F
10/06 21:11, 6F