标签本身不支持设置宽高比，因其为元数据标签、无渲染内容；宽高比控制必须通过css的aspect-ratio属性作用于html元素（如）实现，且需配合明确宽度、禁用冲突的height，现代浏览器支持良好，旧版需padding-bottom降级。
link 标签本身不支持设置宽高比
<link> 是用于引入外部资源（如 CSS、图标、预加载）的元数据标签，它没有 width、height 或 aspect-ratio 属性。浏览器不会根据 <link> 标签渲染任何可视内容，所以“用 link 引入特定宽高比”这个说法存在概念混淆——宽高比控制必须发生在 CSS 或 HTML 元素层。
真正起作用的是 CSS 中的 aspect-ratio 属性
如果你希望某个元素（比如图片容器、卡片、视频占位区）保持 16:9 或 4:3 等比例，得靠 CSS 的 aspect-ratio。它需要配合具体 HTML 元素使用，不能写在 <link> 里。
常见用法：
- 在引入的 CSS 文件中定义规则，例如：
.hero-banner { aspect-ratio: 16 / 9; } - 确保该类被应用到块级元素（如
<div>），且该元素没有冲突的 <code>height或width覆盖 - 注意兼容性：Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版 Safari 需用
padding-top百分比 hack - 误以为给
<link href="style.css">加width="100%"会起作用 —— 实际上这些属性会被忽略 - 在
<link rel="icon">中指定尺寸（如sizes="32x32"）只影响图标选择逻辑，和页面内元素宽高比无关 - 用
<link rel="preload">预加载图片时，即使写了as="image"和imagesrcset，也不改变渲染后容器的比例
link 标签能间接影响宽高比的唯一场景
当 <link rel="stylesheet"> 加载的 CSS 文件里包含了带 aspect-ratio 的规则，或设置了 width/height 固定尺寸时，它才“间接生效”。但这是 CSS 的功劳，不是 <link> 的能力。
容易踩的坑：
如果要动态控制宽高比，别碰 link 标签
需要 JS 控制比例？直接操作元素样式更可靠：
document.querySelector('.card').style.aspectRatio = '4 / 3';
或者用 CSS 自定义属性配合 JS 更新：
document.documentElement.style.setProperty('--aspect', '1 / 1');
再在 CSS 中写：
.square { aspect-ratio: var(--aspect); }
记住：<link> 是管道，不是阀门；它负责把样式送进来，但怎么用、怎么缩放、怎么维持比例，全在 CSS 和 HTML 元素的配合里。漏掉这一层理解，很容易在响应式布局里卡死。
