css 怎样让一张图片无论怎样缩放保持固定的长宽比？

[kisshere]

比如一张图片：800x800px, 怎样通过 css，让其长宽比始终保持 2:1，比如，设置该图片 width:100%，父 div 宽度 500px 的时候，该图片高度：250px ；父 div 宽度 300px 的时候，该图片高度：150px

纯 css 不用 js 怎样实现？

[guojam]

建议用 div+background，<img>标签不是很容易实现

[yimity]

搜索一下图片百分比 img ratio，原理就是 padding-top 百分制的时候，参考计算使用的是 width，所以可以限制比例，然后 img absolute 就可以了。

[catteroLo]

ratiobuddy.com

[wednesdayco]

object-fit:contain;是不是你的需求- -

[KuroNekoFan]

object-fit 没错了

[IsaacYoung]

padding-bottom: 50%;
background: url(xxxx);

[molvqingtai]

利用父元素的 padding 撑出高度，img 绝对定位

[azh7138m]

object-fit + 1
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

[learnshare]

写一个 2:1 的容器，然后图片丢到容器里 100% * 100% 即可，方法楼上提到了多种

实例 https://codepen.io/anon/pen/OYwOZd

[dr2009]

object-fit

[erda]

var + calc 也可以实现
栗子： https://codepen.io/Erdayo/pen/YbOyOa