作者aqua901 (随便啦)
看板Web_Design
标题[问题] 关於div中img的等比例缩放
时间Fri Oct 6 17:04:51 2017
我正在研究自适应网页，
网页中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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1507280696.A.462.html
1F：推 soft2165: padding-bottom 的数字，是你想要的比例。换算成百分比 10/06 20:53
2F：→ soft2165: 。例如16:9 , 9除16*100 = 56.25。 padding-bottom 就 10/06 20:53
3F：→ soft2165: 填入56.25%，就是16:9的比例。以此类推。 10/06 20:53
4F：推 jmlntw: 图片的长宽比。 10/06 20:53
5F：推 sanyaoooo: padding bottom和padding top设%数的话，都是抓本身的 10/06 21:11
6F：→ sanyaoooo: 宽度去算的，所以可以用来做固定长宽比的物件 10/06 21:11