博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》CSS aspect-ratio用错图片比例歪了别再被坑了目录昨天上线一个页面用户疯狂反馈图片变形。宽高比乱成一团像被拉丝的橡皮筋。我盯着屏幕看了半小时差点把键盘砸了——就这破属性坑了我两小时。问题报错HTML结构简单到爆divclasspic-boximgsrcdog.jpgalt小狗/divCSS写法.pic-boximg{aspect-ratio:16/9;/* 以为这样就稳了 */width:100%;}结果图片比例还是歪的。16:9的狗变成1:1了活像被压扁的薯片。核心根源MDN文档写得跟天书一样。aspect-ratio属性必须作用在父容器上不是img。浏览器解析时img的宽高由父容器决定。你直接给img设这个属性浏览器当它是无效CSS直接无视。更坑的是很多人以为像width: 100%一样能直接用。实际是父容器得先有明确宽度比如width: 100%然后用aspect-ratio固定比例。img再填满父容器。解决代码错误写法别学.pic-boximg{aspect-ratio:16/9;/* 错浏览器当它不存在 */width:100%;/* 无效比例没生效 */}正确写法亲测有效.pic-box{aspect-ratio:16/9;/* 关键必须写在父容器 */width:100%;/* 父容器必须有宽度 */}.pic-boximg{width:100%;/* img填满父容器 */height:100%;/* 高度自动匹配比例 */}对比图错误图片比例乱父容器没约束。正确父容器锁死16:9img自动适配。避坑总结父容器是爹aspect-ratio必须写在父容器.pic-box不是img。宽度必须有父容器得设width: 100%或具体值否则比例无效。img要填满img用width: 100%height: 100%别写死宽高。别信网文网上一堆“直接给img加aspect-ratio”的教程那是坑。我翻了10个博客5个写错。最后吐槽这属性文档写得比我的头发还乱。MDN说“元素的宽高比”没强调“父容器”。下次我得自己写个issue。兄弟们记住父容器才是真·老大img只是小弟。省下两小时赶紧去喝杯咖啡吧。