文章/答案/技术大牛

发布

社区首页 >问答首页 >视频填充剩余空间，同时保持CSS的比率

问视频填充剩余空间，同时保持CSS的比率
EN

Stack Overflow用户

提问于 2019-12-03 16:30:00

回答 1查看 936关注 0票数 1

编辑：代码与线框：https://codepen.io/djdmorrison/pen/RwNNpLb，如果我减少.container宽度，视频变得更小，但保持高宽比。但是，如果我降低了.container高度，我希望视频变得更小(缩小宽度)以避免溢出。

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

我有以下线框：

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

我使用了padding-top/bottom: 56.25%技巧来保持视频的纵横比。当窗户又薄又高的时候，这个方法很好用。然而，当窗口是宽和短的时候，视频占据了剩余的全部宽度，导致高度增加，并将视频描述推开窗口。

这里的解决方案是设置视频宽度，使其大小，视频描述触及底部，而不会从页面上掉下来。

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

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

这在javascript中很好，但是我更喜欢CSS解决方案，所以我不需要依赖事件侦听器来调整大小。

谢谢!

html

css

回答 1

Stack Overflow用户

发布于 2019-12-03 16:38:23

如果您希望使用纯CSS解决方案，object-fit属性可能会为您完成此工作。伪码：img {object-fit: fill}

fill是默认选项，将填充父容器。我认为你想从你的问题是保持视频的纵横比，所以你可能希望使用类似的img {object-fit: contain}，以便保持高宽比。

我知道当提到w3school时，这个队列中的许多人都会颤抖，但是这里有一个快速参考，您可以在不需要花上几个小时的时间进行研究和阅读文档的情况下查找它。

如果您希望使用像素或相对值来确定视频容器的大小，您也可能希望查看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()的更权威的参考资料，请参阅莫兹拉医生

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59161455

复制

相似问题

问视频填充剩余空间，同时保持CSS的比率
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频填充剩余空间，同时保持CSS的比率EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频填充剩余空间，同时保持CSS的比率
EN