视频/图像滑块调整大小以适应屏幕（宽度和高度）

Question

我使用这个滑块代码来显示我的图像和视频：

Code:https://codepen.io/1wdtv/pen/jbjZeb

然而问题是，滑块只对宽度有反应。这意味着如果您调整浏览器的大小，它将调整图像/视频的大小，而不考虑它的高度。

是否可以使视频/图像与高度和宽度完全吻合？

我希望它们在屏幕上显示，而不必向下滚动以查看视频/图像的其余部分。 即使这意味着拉伸视频/图像

谢谢

Answer 1

您可以将它添加到您的CSS：

.slider-video { 
    height: 100%; 
} 
video { 
    object-fit: fill; 
} 

这将使它占据整个高度。它会拉伸以填充宽度。这可能会歪曲视频，但您说这是可以接受的。