如何使用 CSS 实现 `` 和 `` 元素的 `background-size: cover` 效果？

如何复制

使用

CSS 方法

单独使用 CSS，您可以为视频创建完美的封面模拟，而无需依赖脚本。诀窍在于精确计算视频相对于父元素的宽高比的宽度和高度。例如，如果您的视频的宽高比为 16:9：

<code class="css">.parent-element-to-video {
  overflow: hidden;
}
video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}</code>

使视频居中

如果您还需要使视频居中，请使用以下 CSS将提供可靠的方法：

<code class="css">/* merge with above CSS */
.parent-element-to-video {
  position: relative; /* or absolute or fixed */
}
video {
  position: absolute;
  left: 50%; /* % of surrounding element */
  top: 50%;
  transform: translate(-50%, -50%); /* % of current element */
}</code>

兼容性注意事项

虽然此解决方案在兼容 CSS3 的浏览器中完美运行，但较旧的浏览器可能需要基于脚本的方法来实现想要的结果。

以上是如何使用 CSS 实现 `` 和 `` 元素的 `background-size: cover` 效果？的详细内容。更多信息请关注PHP中文网其他相关文章！