html - 单个 img 元素保持强制纵横比而无需包装填充黑客

Question

寻找一种控制标签纵横比的技术。在撰写本文时，对 aspect-ratio 属性的支持还不够。

通常我会将元素包装在一个容器中并应用填充顶部来创建所需的效果。但是，我拥有的内容与其他内容是内联的，我无法触摸 html。

图像响应的容器宽度，因此不能直接强制执行高度和宽度。

例如，让图像在容器中保持 16:9 的比例。图像的视觉比例无关紧要。我将调整图像

object-fit: cover

当前是否有一种仅适用于 img 标签本身的技术？

标签： htmlcss

Answer 1

您可以根据 viweport 决定宽度，如

.theImage {
  width: 20vh;
  height: auto;
}

或它的其他变体。