这是一个创建于 2421 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如一张图片：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