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

Question

我正在使用以下滑块代码显示图像和视频：

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

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

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

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

谢谢

Answer 1

您可以将其添加到CSS中：

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

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