0
votes

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?

2
@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
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

2 Answers

2
votes

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.

0
votes

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

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