如何模擬視訊和圖像等 HTML 元素的“background-size: cover”？

你能在 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中文網其他相關文章！