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

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 尝试了 max-height 和 max-width的解决方案，但无济于事。我通过仅包含横向图像（实时网站）暂时解决了该问题。

如何在轮播中包含肖像图像？

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;}