处理图像和媒体的宽度和高度 in/through CSS（设置高度 = 宽度的 200%）

Question

假设 Media，即 Vimeo Video，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>

Answer 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>

Answer 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>

处理图像和媒体的宽度和高度 in/through CSS（设置高度 = 宽度的 200%）

Handling width and height of Images and Media in/through CSS (set the height = 200% of the width)

html

css

height

width