video铺满高度 样子不变
时间: 2023-11-15 16:56:24 浏览: 31
您可以使用 CSS 中的 object-fit 属性来实现视频铺满高度,同时保持原始宽高比。具体来说,您可以将视频的宽度设置为 100%,高度设置为 auto,并将 object-fit 属性设置为 cover。这样,视频就会自适应容器的高度,并且不会变形。
以下是一个示例代码:
```html
<div class="video-container">
<video src="your-video.mp4" autoplay loop muted></video>
</div>
<style>
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
object-fit: cover;
}
</style>
```
在上面的代码中,我们使用了一个容器来包含视频,并将容器的高度设置为 0,以便让视频自适应容器的高度。我们还使用了 padding-bottom 属性来设置容器的宽高比为 16:9(即常见的视频宽高比),这样视频就不会变形。最后,我们将视频的宽度设置为 100%,高度设置为 auto,并将 object-fit 属性设置为 cover,以便让视频铺满容器并保持原始宽高比。