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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2004 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

纯 css 不用 js 怎样实现？

11 条回复 • 2019-05-29 09:36:06 +08:00

guojam

2019-05-28 15:48:54 +08:00

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

yimity

2019-05-28 16:20:02 +08:00

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

catteroLo

2019-05-28 18:12:59 +08:00

wednesdayco

2019-05-28 18:26:09 +08:00

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

KuroNekoFan

2019-05-28 18:37:45 +08:00 via iPhone

object-fit 没错了

IsaacYoung

2019-05-28 19:05:20 +08:00

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

molvqingtai

2019-05-28 19:31:24 +08:00 via Android

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

azh7138m

2019-05-28 19:46:54 +08:00

learnshare

2019-05-28 20:03:29 +08:00

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

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

dr2009

2019-05-29 09:09:22 +08:00

object-fit

erda

2019-05-29 09:36:06 +08:00

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