通过 CSS 处理图像和媒体的宽度和高度（设置高度 = 宽度的 200%）答案

【问题标题】：Handling width and height of Images and Media in/through CSS (set the height = 200% of the width)通过 CSS 处理图像和媒体的宽度和高度（设置高度 = 宽度的 200%）
【发布时间】：2017-08-01 18:55:19
【问题描述】：

假设 Media，即 Vimeo 视频，width 设置为 100%，但是如果我将高度设置为自动，那么高度就会太低。

后来，我为 Video/Media 设置了 500px 的高度，但有没有办法可以将高度设置为宽度的 200%。

<iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

【问题讨论】：

在此处添加您尝试过的代码。
我已经添加了代码，但是问题或对问题的看法几乎不会改变代码。问题归结为 CSS 中是否存在这样的安排来帮助我实现我想要的。

标签： html css height width

【解决方案1】：

试试这个，height: 56.25vw; 将保持16:9 纵横比

.wrapper {
  position: relative;
  height: 56.25vw;
  width: 100%;
  margin: 0 auto;
}

.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

【讨论】：

【解决方案2】：

元素的宽度和高度可以使用 vw 单位。这允许根据视口宽度保持元素的纵横比（注意：如果需要根据视口高度保持纵横比，也可以查看 vh）。

<iframe src="https://player.vimeo.com/video/113657402" width="10vw" height="20vw" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

【讨论】：