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

Question

我使用Owl Carousel在带有 Javascript 和 jQuery 的旋转木马中显示图像。 我有纵向和横向图像以及 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 Object-Fit属性是您的朋友。 这使得图像的最长部分始终保持在容器范围内。

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

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

Answer 2

你能添加object-fit：cover吗？ css 并添加固定高度。 尝试这个

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