Less中calc()无法实现响应式图片裁剪，因编译时静态求值且不支持运行时尺寸计算；应使用变量+媒体查询预设padding-top或aspect-ratio，并避免用小数形式aspect-ratio。
Less里用calc()做响应式图片裁剪不靠谱
直接在background-size: cover或object-fit: cover上套calc()算比例，多数情况会失效——因为calc()不能参与background-position的百分比推导，更没法驱动aspect-ratio的动态计算。Less编译时是静态求值，运行时尺寸未知，硬塞calc(100vw / 16 * 9)这种写法，浏览器根本不会按你预期解析。
用Less变量+媒体查询预设常用裁切比例
真正可行的是把常见宽高比（如16:9、4:3、1:1）拆成变量，在不同断点下显式覆盖padding-top或aspect-ratio。Less只负责生成多套CSS规则，不参与运行时计算。
示例：
@ratio-16x9: 56.25%; // 9/16 * 100%
@ratio-4x3: 75%; // 3/4 * 100%
@ratio-1x1: 100%;
<p>.img-container {
position: relative;
width: 100%;</p><p>&::before {
content: "";
display: block;
padding-top: @ratio-16x9;
}</p><p>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}</p><p>@media (max-width: 768px) {
.img-container {
&::before { padding-top: @ratio-4x3; }
}
}</p><p>@media (max-width: 480px) {
.img-container {
&::before { padding-top: @ratio-1x1; }
}
}</p>
避免用aspect-ratio变量直接运算
Less里写aspect-ratio: 16 / 9;看似简洁，但编译后是aspect-ratio: 1.7777777778;，部分旧版浏览器（如Safari 15.4之前）不认小数形式，只接受16 / 9字面量。而Less无法保留斜杠不计算。
安全做法是：
- 用字符串变量存字面量：
@ar-16x9: "16 / 9";，再通过~"@{ar-16x9}"注入 - 或干脆放弃变量，各断点下硬写
aspect-ratio: 16 / 9;——编译器会原样输出 - 注意：IE完全不支持
aspect-ratio，必须 fallback 到padding-top方案
裁剪逻辑实际由object-fit或background-size控制
Less只管容器尺寸和比例，真正的“裁剪”行为发生在元素渲染层。别指望Less能干预像素级裁切位置。
关键点：
-
object-fit: cover+width/height: 100%适用于 -
background-size: cover+background-position: center适用于背景图 - 如果需要精确控制裁切起始点（比如固定裁顶部），得用
background-position: center top，不能靠Less算偏移量 - 所有数学运算必须在CSS运行时完成，Less最多帮你批量生成几组
background-position组合
真正难的不是怎么写Less，而是理清哪部分该交给CSS运行时，哪部分能靠预设覆盖——比例可以预设，位置和缩放细节必须留白给浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
