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

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