html - 视频填充剩余空间，同时与 CSS 保持比例

Question

编辑: 带线框的代码笔:https://codepen.io/djdmorrison/pen/RwNNpLb如果我减小 .container 宽度，视频会按预期变小但保持宽高比。但是，如果我减小 .container 高度，我希望视频变小(减小宽度)以免溢出。

我已经用 javascript 解决了这个问题，但更愿意使用 CSS 解决方案。

我有以下线框图:

这需要是一个单页应用程序——不能滚动。页眉、聊天边栏、页脚都是固定大小。视频描述是由其内容决定的固定高度。然后视频占据剩余空间，保持 16:9 的纵横比。如果视频高度足够小，那么它会“粘”在视频的底部并在其下方留下任何空白空间。如果视频高度很大，那么视频描述应该到达底部，视频应该变小以填充剩余空间。

我使用了 padding-top/bottom: 56.25% 技巧来保持视频宽高比。当窗口足够薄且足够高时，此方法效果很好。但是，当窗口又宽又短时，视频会占据全部剩余宽度，导致高度增加并将视频描述推离窗口。

此处的解决方案是设置视频宽度，使其处于视频描述触及底部而不会脱离页面的大小。

用于此的伪代码(其中 videoContainer 是视频和描述的空间)

video.width = (videoContainer.height - videoDescription.height) * (16/9) + 'px'

这适用于 javascript，但我更喜欢 CSS 解决方案，这样我就不必依赖事件监听器来调整大小。

谢谢!

Answer 1

如果您希望使用纯 CSS 解决方案，object-fit 属性可以为您完成这项工作。在伪代码中:img {object-fit: fill}

fill 是默认选项，将填充父容器。我认为你想从你的问题中得到的是保持视频的纵横比，所以你可能希望使用像 img {object-fit: contain} 这样的东西来保持纵横比。

我知道这个群体中的很多人在提到 w3school 时都会颤抖，但这里有一个 quick reference让您无需花费数小时进行研究和阅读文档即可进行查找。

如果您希望使用像素或相对值来确定视频容器的大小，您可能还需要查看 fit-content() CSS 函数。例如:

#container__video {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
}

有关 fit-content() 的更权威引用，请参阅 Mozilla's Doc

如果这就是您想要的，请告诉我。