这是一个创建于 2420 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如一张图片：800x800px, 怎样通过 css，让其长宽比始终保持 2:1，比如，设置该图片 width:100%，父 div 宽度 500px 的时候，该图片高度：250px ；父 div 宽度 300px 的时候，该图片高度：150px
纯 css 不用 js 怎样实现？
 | 1 guojam 2019 年 5 月 28 日 建议用 div+background，<img>标签不是很容易实现 |
 | 2 yimity 2019 年 5 月 28 日 搜索一下图片百分比 img ratio，原理就是 padding-top 百分制的时候，参考计算使用的是 width，所以可以限制比例，然后 img absolute 就可以了。 |
 | 3 catteroLo 2019 年 5 月 28 日 |
 | 4 wednesdayco 2019 年 5 月 28 日 object-fit:contain;是不是你的需求- - |
 | 5 KuroNekoFan 2019 年 5 月 28 日 via iPhone object-fit 没错了 |
 | 6 IsaacYoung 2019 年 5 月 28 日 padding-bottom: 50%; background: url(xxxx); |
 | 7 molvqingtai 2019 年 5 月 28 日 via Android 利用父元素的 padding 撑出高度，img 绝对定位 |
 | 8 azh7138m 2019 年 5 月 28 日 |
 | 9 learnshare 2019 年 5 月 28 日  1 |
 | 10 dr2009 2019 年 5 月 29 日 object-fit |
 | 11 erda 2019 年 5 月 29 日 var + calc 也可以实现 栗子： https://codepen.io/Erdayo/pen/YbOyOa |
Select Language