如何在轮播中显示纵向和横向图像？

Question

我使用Owl Carousel在带有Javascript和jQuery的Carousel中显示图像。我有肖像和风景图片，还有CSS：

.owl-carousel {
  max-height: 80%;
  max-width: 90%;
  display:block;
  margin: 0 auto;
}

.owl-carousel img {
  max-height: 100%;
  max-width: 100%;
}

横向图像遵守宽度的100%限制，全图显示在屏幕上；肖像图像不符合100%的高度限制，图片显示在一个或两个屏幕上，需要向下滚动。我希望纵向图片能够调整大小，并在横向屏幕上完全显示，就像我希望横向图片能够在纵向屏幕上完全显示一样。

我用CSS尝试了最大高度和最大宽度的解决方案，但都没有效果。我暂时修复了这个问题，只包括风景图片（实时网站）。

如何在旋转木马中包含肖像图像？

Answer 1

能否请您添加对象适合：封面；css并添加固定高度。试试这个

.owl-carousel img{
object-fit: cover;
height: 700px;}

Answer 2

css Object Fit属性是您在这里的朋友。这使得图像的最长部分始终保持在容器边界内。

.owl-carousel img {
  display:block;
  margin: 0 auto;
  object-fit: contain;
}

在您的情况下，您可能希望为图像提供父级。owl carousel也可以设置实际大小，而不是仅设置最大大小并使用边距。此外，我建议将图像居中，而不是容器居中。