Question

我正尝试在我网站的英雄部分中用Vimeo视频复制background-size: cover;。我可以使视频看起来很好，但在小屏幕上无法正确缩小比例。

这是我目前所拥有的：

HTML：

<div id="vimeohero">
  <iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS：

#vimeohero {
  height: 300px;
}

iframe {
  width: 100vw;
  height: 56.25vw; // Given a 16:9 aspect ratio, 9/16*100 = 56.25
  min-height: 100vh;
  min-width: 177.77vh; // Given a 16:9 aspect ratio, 16/9*100 = 177.77
  position: relative;
  top: 50%;
  left: 50%;
  transform: perspective(1px) translate(-50%, -50%);
}

https://jsfiddle.net/a7j0rbmq/1/

当您在小屏幕（375像素乘812像素）上观看视频时，视频被放大并且显示的效果与background-size: cover;相同。

（显然，视频将不得不放大一点以填充空间，但这会放大超过必要的大小。如果将屏幕的高度更改为与div的高度（300像素）匹配，则显示效果很好。） / p>

如果删除min-width声明，几乎可以解决该问题，但是在某些屏幕尺寸上，视频的两边都会出现空格：（

Answer 1

您需要在CSS上进行一些更改以实现您想要的。

编辑：将高度调整为300px。

#vimeohero {
    background: #eee;
    height: 300px;
    overflow: hidden;
    padding: 0;
    position: relative;
}

iframe {
  box-sizing: border-box;
    height: 56.25vw;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    width: 177.77777778vh;
}

<div id="vimeohero">
  <iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

代码段不显示视频，请参见codepen。

https://codepen.io/flavio-caruso/pen/WBKZqY

Answer 2

#vimeohero {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
}
*{
  padding:0;
  margin:0;
}

<div id="vimeohero">
  <iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

删除所有元素上的填充和边距即可解决问题！

Vimeo背景的响应英雄

2 个答案: