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

Question

编辑： 带线框的 Codepen：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

让我知道这是否是你所追求的。