仅使用 css 将高度设置为宽度的比率

Question

我想在 HTML 中为 <img> 元素实现以下效果， 仅使用 CSS ：

 width: calc(100% - 20px)
height: calc(width * 0.5625) /*16:9 aspect ratio*/

互联网上有关于 <div> 元素及其背景的类似示例。但在 <img> 元素的情况下，更改填充不起作用

类似示例： 使用 CSS 保持 div 的纵横比

编辑，使用 jQuery 可以通过以下方式实现上述目标：

 $(".myImage/s").outerHeight($(".myImage/s").outerWidth() * 0.5625);

原文由 Alexander 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 viewport-width ( vw ) 在 height 属性中定义宽度：

 width: calc(100% - 20px)
height: calc((100vw - 20px) * 0.5625) /*16:9 aspect ratio*/

viewport 是网页的可见区域。

它的全尺寸是 100vw * 100vh ，其中 vw 和 wh 是视口尺寸单位。

因此，一个“ vw ”等于网页当前可见宽度的 1% 。

可以在以下位置找到更多信息： 视口单位：vw、vh、vmin、vmax

原文由 HelpingHand 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

CSS 有一个名为 aspect-ratio 的内置属性，只需在定义高度或宽度后将其分配给元素即可。 CSS-tricks 有一个例子，我在下面做了一个代码片段。

 div{
  width:50vw;
  border: 2px solid black;
  border-radius: 15px;
  margin:5px;
  aspect-ratio: 16/9;
 }

 <div>
</div>

原文由 SamsonTheBrave 发布，翻译遵循 CC BY-SA 4.0 许可协议