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