媒体元素的纵横比和 intrinsicsize

如果您需要一个大小为纵横比的 <div>（或任何可以包含子元素的元素），您可以做到。也许最简洁的方法是使用自定义属性大小的伪元素，通过基于宽度的填充来推动正确的最小高度。

但是像 <img> 这样的媒体元素没有子元素。<video> 标签不是自闭合的，但当它被支持时（几乎总是），它的内容会被您无法控制的 Shadow DOM 替换。此外，这两个元素是唯一“调整到外部资源大小”的元素。那么，当使用可变宽度（如 100% 或 75vw）时，如何强制它们保持纵横比呢？好吧，一旦它们加载，它们就会具有其自然纵横比，所以这很好。但这也意味着它们在加载时不知道高度，并且可能会导致性能抖动重排。

一种解决方案是将它们放入具有纵横比的容器中，并使用绝对定位将其强制到角落。但是，在它们加载之前，它们本身无法正确调整到纵横比。

因此，针对“所有图像元素类型（包括 SVG 图像）和视频”的 intrinsicsize 属性目前正在开发中。

<img intrinsicsize="400x300" style="width: 100%">

说明文档 很有帮助。之所以是 intrinsicsize 而不是 aspectratio，是因为纵横比不会提供太多有用或可用的信息。我希望它能够在任何元素上工作，并被引入 CSS 中。