Question

假设媒体， Vimeo视频 宽度设置为 100％，但如果我将高度设置为自动高度太低。

稍后，我为视频/媒体设置了 500px 的高度，但是有一种方法可以设置宽度的200％。< / p>

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

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

2 个答案: