:has()无法检测图片宽高比，因其仅匹配dom结构和属性状态，不读取渲染后的几何属性；可行方案是用data-ratio等自定义属性标记比例后配合:has()使用。
不能直接用 :has() 检测子 <img> 的宽高比，它不读取元素渲染后的几何属性，只匹配 DOM 结构和属性状态。
为什么 :has() 无法获取图片宽高比
:has() 的括号内只能写「能静态解析或靠 DOM 属性/状态判断」的选择器，比如 img[src]、img[width]、img[data-ratio="4:3"]。但浏览器不会在样式计算阶段去读取 img.naturalWidth 或 getBoundingClientRect() 这类运行时尺寸——那属于 JS 范畴。
常见错误尝试：.card:has(img:is([width="400"][height="300"])) 看似合理，但实际无效：因为 width/height 属性值常被 CSS 覆盖，且多数图片根本没设这些属性；:is() 在 :has() 内部支持也不稳定（Safari 16.3 及更早会静默忽略）。
-
:has(img[aspect-ratio])❌ ——aspect-ratio是 CSS 属性，不是 HTML attribute，:has()不识别 -
:has(img:has(::before))❌ —— 伪元素不生成真实节点，:has()禁用 -
:has(img:hover)❌ —— 动态伪类在:has()中不被允许，Chrome/Firefox/Safari 全部拒绝
可行方案：用属性标记 + :has() 响应
真正落地的做法是让 JS 或服务端提前把宽高比信息作为 attribute 注入到 <img> 上，再用 :has() 匹配该属性。例如：
<div class="gallery-item"> @@##@@ </div>
然后写 CSS：
.gallery-item:has(img[data-ratio="16:9"]) {
aspect-ratio: 16 / 9;
display: grid;
}
.gallery-item:has(img[data-ratio="4:3"]) {
aspect-ratio: 4 / 3;
display: flex;
}
- 务必用
data-ratio这类自定义属性，而不是ratio—— 避免与未来可能的原生属性冲突 - JS 注入时要调用
img.setAttribute('data-ratio', '16:9')，不能只改img.dataset.ratio，否则:has()读不到 - 如果图片是懒加载，需在
load事件后才设置data-ratio，否则规则不触发
纯 CSS 替代：用 object-fit + 容器 aspect-ratio 控制视觉效果
若目标只是让父容器“看起来适配”图片比例，而非精确响应不同比例分支，可跳过 :has()，直接用现代 CSS 组合：
.gallery-item {
aspect-ratio: 16 / 9; /* 默认按 16:9 占位 */
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 针对 4:3 图片单独处理（需手动加 class） */
.gallery-item.is-4x3 {
aspect-ratio: 4 / 3;
}
- 这种方式不依赖 JS，兼容性更好（
aspect-ratioChrome 88+、Firefox 89+、Safari 15.4+） - 缺点是无法自动识别比例，必须人工或构建时打标；但比强求
:has()检测更可靠 - 注意：Safari 15.4–16.3 对
:has(img[data-ratio])支持尚可，但若搭配+ .caption等兄弟选择器，可能静默失效
最易被忽略的一点：宽高比逻辑本质是**内容驱动的布局决策**，而 :has() 只能做存在性判断。真要动态响应渲染后尺寸，还是得靠 ResizeObserver 配合 class 切换——:has() 在这里只是个轻量的“开关”，不是“计算器”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
