比如一张图片：800x800px, 怎样通过 css，让其长宽比始终保持 2:1，比如，设置该图片 width:100%，父 div 宽度 500px 的时候，该图片高度：250px ；父 div 宽度 300px 的时候，该图片高度：150px
纯 css 不用 js 怎样实现？
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2567 days ago, the information mentioned may be changed or developed.
 |
1
guojam May 28, 2019
建议用 div+background，<img>标签不是很容易实现
|
 |
2
yimity May 28, 2019
搜索一下图片百分比 img ratio，原理就是 padding-top 百分制的时候，参考计算使用的是 width，所以可以限制比例，然后 img absolute 就可以了。
|
 |
3
catteroLo May 28, 2019
|
 |
4
wednesdayco May 28, 2019
object-fit:contain;是不是你的需求- -
|
 |
5
KuroNekoFan May 28, 2019 via iPhone
object-fit 没错了
|
 |
6
IsaacYoung May 28, 2019
padding-bottom: 50%;
background: url(xxxx); |
 |
7
molvqingtai May 28, 2019 via Android
利用父元素的 padding 撑出高度，img 绝对定位
|
 |
8
azh7138m May 28, 2019
|
 |
9
learnshare May 28, 2019  1
|
 |
10
dr2009 May 29, 2019
object-fit
|
 |
11
erda May 29, 2019
var + calc 也可以实现
栗子： https://codepen.io/Erdayo/pen/YbOyOa |
Select Language