Less中用变量控制图片容器尺寸需设@img-container-width并配合max-width和height:auto；aspect-ratio须用~"16/9"转义防单位注入；断点变量应嵌套媒体查询内定义，作用域隔离；background-size可变量化但url()内路径不可运算。
Less里怎么用变量控制图片容器尺寸
直接用变量替代固定像素值，但必须配合 max-width 和 height: auto 才能真正响应。光改 width 变量没用，图片会拉伸或溢出。
-
@img-container-width: 100%是安全起点，不是400px这类死值 - 变量要作用在容器上（比如
.img-wrapper），而不是直接写在img标签选择器里 - 如果同时设了
min-width，记得用同套变量，否则小屏下容器卡住不动 - 移动端常用
@img-container-width: 90vw，比100%更防边距撑破
为什么用aspect-ratio前得先关掉Less自动插入单位
Less默认给数字加 px，而 aspect-ratio: 16/9 要纯数字比值。不处理就会编译成 aspect-ratio: 16px/9px，浏览器直接忽略。
- 写法必须是
aspect-ratio: ~"16/9"，用~""强制转义 - 如果用变量存比例，得定义成字符串：
@aspect: ~"4/3"，不能写@aspect: 4/3 - 旧版浏览器不支持
aspect-ratio，得配padding-top响应式占位，这时变量要同步计算：padding-top: percentage(9/16)
图片宽度随屏幕断点变化时，Less变量怎么分层管理
别在一个变量里硬塞多个值，用媒体查询嵌套变量更可控。全局变量只管基础值，断点内覆盖局部值。
- 基础变量定义：
@img-max-width: 100% - 在
@media (min-width: 768px)里重定义：@img-max-width: 600px - 注意：Less变量作用域是块级的，嵌套媒体查询里的变量不会泄漏到外层
- 如果多个组件共用同一组断点尺寸，把断点变量单独抽成
breakpoints.less，用@import引入
用background-image做响应式图时，Less变量怎么传尺寸
背景图尺寸靠 background-size 控制，但变量不能直接进 url()，得拆开写。常见错误是试图用变量拼接路径或尺寸值进 url()。
立即学习“前端免费学习笔记（深入）”；
-
background-size的值（如cover、100% 100%）可以绑定变量：@bg-size: cover - 但
background-image: url("@{img-path}")中的@{img-path}必须是完整路径字符串，不能含变量运算 - 如果要根据屏幕切换不同分辨率图，用
image-set()配合变量时，每个源必须显式写单位：image-set(url(img@1x.jpg) 1x, url(img@2x.jpg) 2x) - 慎用
background-size: @img-width @img-height—— 宽高都变量化后，容易在窄屏下高度塌缩，建议至少一个值固定为auto
最麻烦的是容器宽高都由变量驱动，又得保持图片不畸变，这时候 aspect-ratio + object-fit 组合比纯变量更可靠，变量只管容器框架，不管内容渲染逻辑。
