如何使用 CSS 在 HTML 元素上實作「background-size: cover」功能？

如何實現Background-Size：用CSS覆蓋HTML元素的功能

模擬HTML元素上background-size:cover的功能像或圖像一樣可能是一項棘手的任務。但是，使用 CSS 屬性的組合，可以創建一個無需任何腳本即可模仿所需行為的解決方案。

CSS 解決方案

實現背景的關鍵-size:cover 是適當設定視訊元素的高度、寬度和最小尺寸。透過使用基於視訊寬高比（例如 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 在 HTML 元素上實作「background-size: cover」功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！