你能在 HTML 元素上模拟背景大小:覆盖吗?
背景大小:覆盖是一个重要的 CSS 属性,用于将图像缩放到适合容器元素,同时保持其纵横比。然而,视频和 img 标签等 HTML 元素本身不支持此功能。
实现背景大小:用 CSS 覆盖
幸运的是,存在一个 CSS-唯一能够有效模拟此行为、消除脚本依赖性的解决方案。技巧如下:
<code class="css">.parent-element-to-video { overflow: hidden; } video { height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 (for 16:9 aspect ratio videos) */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 (for 16:9 aspect ratio videos) */ }</code>
将视频的高度设置为 100% 可以使其按比例填充其父元素的高度。计算出的宽度可确保保持视频的宽高比,同时允许视频在必要时放大以覆盖整个父元素。最小宽度和最小高度可防止视频缩小到低于其自然尺寸。
使视频居中
要将视频在其父元素中居中,请添加以下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>
此方法可确保视频在所有情况下都完美居中。
注意:如果您的视频具有不同的宽高比,请调整相应地计算宽度和最小高度以保持所需的比例。
以上是如何模拟视频和图像等 HTML 元素的“background-size: cover”?的详细内容。更多信息请关注PHP中文网其他相关文章!