如何用纯CSS实现和一致的'背景大小：覆盖”效果？

和 使用纯 CSS？ " /> 和 使用纯 CSS？ " />

为

等元素实现一致的“背景大小：封面”效果video> 和 一直是一个长期的挑战。

没有边缘情况的 CSS 解决方案：

不依赖脚本，而是没有边缘情况可以通过以下步骤实现：
2. 将父元素设置为溢出：隐藏。
3. 将视频或图像元素设置为高度：100%;。
4. 根据宽高比计算宽度（例如，16:9 视频为 100 * 16 / 9）。
5. 设置 min-width: 100% 以防止调整大小小于父级。

设置最小高度以确保高度按比例缩小。

示例：

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

居中视频：

<code class="css">.parent-element-to-video {
    position: relative;
}

video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}</code>

要将视频居中，请使用以下 CSS：

以上是如何用纯CSS实现和一致的'背景大小：覆盖”效果？的详细内容。更多信息请关注PHP中文网其他相关文章！