javascript - 视频/图像 slider 调整大小以适合屏幕(宽度和高度)

Question

我正在使用此 slider 代码来显示我的图像和视频:

代码: https://codepen.io/1wdtv/pen/jbjZeb

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

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

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

谢谢

Answer 1

您可以将其添加到您的 CSS 中:

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

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