视频填充剩余空间，同时保持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

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