如何在輪播中顯示縱向和橫向圖像？

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