Как я могу отображать портретные и альбомные изображения в карусели?

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% -ному ограничению по высоте, и изображение появляется на одном или двух экранах, требуя прокрутки вниз. Я хотел бы, чтобы размер портретных изображений был изменен и полностью отображался на экране с альбомной ориентацией, точно так же, как я бы хотел, чтобы альбомные изображения полностью отображались на экране с портретной ориентацией.

Я пробовал решения в max-height И max-width с 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;}