css video自适应

laobai 6个月前 176浏览 0评论

CSS可以让我们很容易地创建自适应的video标签。为此,我们需要使用max-width和max-height属性和宽度和高度比例计算。下面是示例代码:

.video-container {
  position: relative;
  padding-bottom: 56.25%; /*使用16:9的宽高比*/
  height: 0;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

我们可以将视频容器的宽度设置为其上下文区域的百分比,从而实现自适应的效果。 padding-bottom属性设置容器的高度,而video元素的position属性设置为absolute,以便将其放置在容器中。

最后,我们需要为video元素添加max-width和max-height属性。这样,当浏览器调整大小时,视频也会相应地缩放。

.video-container video {
  max-width: 100%;
  max-height: 100%;
}

现在,我们已经创建了一个完全自适应的video元素。这个技术可以用于任何包含video标签的网页中,以确保内容始终适合屏幕尺寸。