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?
window.addEventListener("orientationchange", yourToggleFunction);
and you can check viascreen.orientation.angle
and change your image path's ? – halilcakar