如何使用 CSS 實作 `` 和 `` 元素的 `background-size: cover` 效果？

如何複製

使用

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