如何复制
使用
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中文网其他相关文章!