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

Question

我正在使用此滑块代码来显示我的图像和视频：

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

但问题是滑块仅在涉及宽度时才响应。这意味着如果您调整浏览器的大小，它会随之调整图像/视频的大小，而不考虑其高度。

是否可以使视频/图像从高度和宽度完全适合屏幕？

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

谢谢

Answer 1

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

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

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