如何在 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>