0

I use Owl Carousel to display images in a carousel with Javascript and jQuery. I have portrait and landscape images and with the CSS:

.owl-carousel {
  max-height: 80%;
  max-width: 90%;
  display:block;
  margin: 0 auto;
}

.owl-carousel img {
  max-height: 100%;
  max-width: 100%;
}

the landscape images respect the 100% limit on width and the full picture appears on screen; the portrait images do not respect the 100% limit on height and the picture appears in one or two screens, requiring scrolling down. I would like the portrait pictures to be resized and display completely on a screen with landscape orientation, just as I'd like landscape pictures to display completely on a screen with portrait orientation.

I have tried the solutions in max-height AND max-width with CSS only to no avail. I have temporarily fixed the problem by including only landscape images (live website).

How can I include portrait images in the carousel?

miguelmorin
  • 5,025
  • 4
  • 29
  • 64
  • Hi https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation, maybe this works? – halilcakar Jun 17 '20 at 21:30
  • @HalilÇakar As I understand that detects whether the viewport is in landscape or portrait. I updated the question with more details on what I want to achieve. – miguelmorin Jun 17 '20 at 21:36
  • Oh i see, yea if you want to change images by viewport then just detect when they change, so maybe `window.addEventListener("orientationchange", yourToggleFunction);` and you can check via `screen.orientation.angle` and change your image path's ? – halilcakar Jun 17 '20 at 21:40

2 Answers2

2

The css Object-Fit property is your friend here. This makes it so the longest part of the image always stays within the container bounds.

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

In your case, you might want to give the image parent .owl-carousel an actual size as well instead of setting just max sizes and using margins. Also, I suggest centering the image, not the container.

Bryce Howitson
  • 7,339
  • 18
  • 40
0

Can you please add object-fit: cover; css and add fix height. try This

.owl-carousel img{
object-fit: cover;
height: 700px;}
Dhaval Patel
  • 100
  • 6
  • I believe `object-fit: cover` scales the image up to fit the container, which would be useful for a background image. In this case `object-fit: contain` served for what I wanted: display the full image within a container. – miguelmorin Jun 18 '20 at 11:51