less 中不存在 image-size 函数，因其为静态预处理器，无文件系统访问和图像解码能力；可行方案是构建前用脚本生成尺寸变量或运行时用 js 配合 css 自定义属性。
Less 的 image-size 函数根本不存在
Less 语言本身不提供 image-size 这类运行时图片分析函数。你看到的可能是混淆了 Sass（尤其是 Ruby Sass 旧版）的 image-width()/image-height()，或误读了某些构建工具插件的文档。原生 Less 编译器（less.js 或 lessc）在解析阶段完全不读取、不解析图片文件，更不会提取其宽高。
为什么直接在 Less 中“动态获取图片尺寸”不可行
Less 是静态预处理器，所有计算发生在编译期，且仅基于已知文本和变量。它没有文件系统访问能力，也无法执行图像解码逻辑。即使你写 width: image-width("logo.png");，Less 会直接报错：Unrecognised input 或 Function image-width is undefined。
- Webpack/Vite 等打包工具的 CSS 加载器（如
url-loader、assets-modules）只负责资源引用替换，不向 Less 传递元数据 - PostCSS 插件（如
postcss-image-inliner）作用于 CSS 输出阶段，无法反向影响 Less 变量定义 - 试图用 JavaScript 在运行时读取
naturalWidth并注入 CSS —— 这属于 DOM 操作，和 Less 编译毫无关系
可行的替代方案：编译前注入尺寸变量
真正能落地的做法，是把图片尺寸作为构建流程的一部分，在 Less 编译前生成变量文件。例如用 Node.js 脚本扫描 src/assets/images/，读取 PNG/JPG 尺寸，输出 images-dimensions.less：
/* 自动生成的 images-dimensions.less */ @logo-width: 240px; @logo-height: 80px; @avatar-max-width: 120px;
然后在主 Less 文件中导入：
@import "images-dimensions.less";
<p>.logo {
width: @logo-width;
height: @logo-height;
}</p>
- 脚本可用
sharp（推荐，快且支持 WebP/AVIF）或pngjs/jpeg-js解析二进制头信息 - 务必加入缓存与变更检测（如比对文件 mtime），避免每次编译都重读全部图片
- 注意单位一致性：Less 变量默认无单位，
@logo-width: 240;后需手动加px，或统一存为@logo-width: 240px;
更轻量的 Hack：CSS 自定义属性 + JS 回填（仅限运行时场景）
如果必须“动态”响应图片加载结果（比如用户上传预览），放弃 Less 变量，改用 CSS 自定义属性 + JavaScript：
@@##@@ <div class="container" style="--img-natural-width: 0;"></div>
JS 侧监听 load 事件后设置：
img.addEventListener('load', () => {
container.style.setProperty('--img-natural-width', `${img.naturalWidth}px`);
});
CSS 中使用：
.container {
width: var(--img-natural-width, auto);
}
- 这和 Less 无关，但解决了“动态尺寸赋值”的真实需求
- 注意
naturalWidth在图片跨域时可能返回 0，需提前设置img.crossOrigin = "anonymous" - 服务端渲染（SSR）场景下该方案失效，仍需回到构建期预计算
Less 不处理图片二进制，所有“运行时尺寸感知”都得绕开它的编译模型。真正要做的不是找一个不存在的函数，而是明确你的场景发生在哪里：构建期？还是浏览器里？前者靠脚本生成变量，后者靠 JS 配合 CSS 变量 —— 混用两者边界，只会卡在 undefined 报错里出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
