如何在 div 中垂直和水平居中視頻，同時保持縱橫比和最大化可用空間

Question

我有一個未知大小的 div（我在示例中使用了固定高度，但這僅用於說明目的）並且我有一個未知大小的視頻，但視頻縱橫比是已知的（在本例中為 16:9）。

我想將視頻在 div 中垂直和水平居中。

我只想在可能的情況下使用 CSS 和 HTML 。 沒有 JavaScript。

視頻應始終包含在 div 中。 視頻可以拉伸或縮小，並且應該緊貼 div 但是...

必須始終保持視頻的縱橫比。 確保遵守此要求：

• 視頻高度應盡可能與 div 的高度相同

• 視頻寬度應盡可能與 div 的寬度相同

因此，隨着瀏覽器大小的調整，兩者的外觀應始終如下所示：

第一個圖像代表一個與視頻寬度相同但高度更大的main div。

第二個圖像代表一個main div，與視頻的高度相同，但寬度更大。

如果需要，可以使用包裝器 div。

這是我迄今為止嘗試過的，但它不起作用（請原諒我過度使用包裝器）：

 div.main { width: 80%; height: 200px; background-color: pink; } div.video-wrapper-1 { height: 100%; position: relative; } div.video-wrapper-2 { width: 100%; height: 100%; } div.video-wrapper-3 { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } div.video-wrapper-4 { display: flex; justify-content: center; align-items: center; height: 100%; aspect-ratio: 16/9;important: overflow; hidden: } video { display; block; }

 <div class="main"> <div class="video-wrapper-1"> <div class="video-wrapper-2"> <div class="video-wrapper-3"> <div class="video-wrapper-4"> <video autoplay muted controls> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> </video> </div> </div> </div> </div> </div>

Answer 1

試試video { max-width: 100% }或width: 100% / auto; . 它會有所幫助。

Answer 2

感謝 Kunal Tanwar 的評論，我得到了這個工作。 這是簡化的完整工作版本。

 div.main { width: 80%; height: 200px; background-color: pink; } div.video-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } video { display: block; max-width: 100%; max-height: 100%; }

 <div class="main"> <div class="video-wrapper"> <video autoplay muted controls> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> </video> </div> </div>

Answer 3

您可以在視頻中使用 object-fit contains。

我不明白所有包裝紙的用途，因此已將其刪除。

 div.main { width: 80%; height: 200px; background-color: pink; } video { width: 100%; height: 100%; object-fit: contain; }

 <div class="main"> <video autoplay muted controls> <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"> </video> </div>