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

【问题标题】：How can I display portrait and landscape images in a carousel?如何在轮播中显示纵向和横向图像？
【发布时间】：2020-10-07 20:14:31
【问题描述】：

我使用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% 的高度限制，图片显示在一两个屏幕上，需要向下滚动。我希望调整纵向图片的大小并完全显示在横向屏幕上，就像我希望横向图片完全显示在纵向屏幕上一样。

我已尝试max-height AND max-width with CSS only 中的解决方案，但无济于事。我已通过仅包含横向图像 (live website) 暂时解决了此问题。

如何在轮播中加入肖像图片？

【问题讨论】：

嗨developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation，也许这行得通？
@HalilÇakar 据我了解，它检测视口是横向还是纵向。我更新了问题，详细说明了我想要实现的目标。
哦，我明白了，是的，如果您想通过视口更改图像，那么只需检测它们何时发生变化，所以也许window.addEventListener("orientationchange", yourToggleFunction); 并且您可以通过screen.orientation.angle 检查并更改图像路径？

标签： javascript html jquery css

【解决方案1】：

能否请您添加object-fit：cover； css 并添加固定高度。试试这个

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

【讨论】：

我相信object-fit: cover 会缩放图像以适应容器，这对于背景图像很有用。在这种情况下，object-fit: contain 服务于我想要的：在容器中显示完整图像。

【解决方案2】：

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

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

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

【讨论】：