Custom behaviour on image ratio

[petitclercj]

Hi, I currently am using a carousel in wordpress which is set to occupy the screen entirely.
For now the height is set to 100%. That works well for portrait pictures. But the problem arise when I have landscape pictures that aren’t exactly the right sreen ratio, they fill height but leave a blank space on the right margin (which I don,t mind on portrait pictures since the blank space is important).

I would like a bit of css that works for the whole carousel depending on the image aspect ratio, landscape or portrait.

If something could work, a bit like this…

.carousel{
object-fit: fill;
}
.carousel:portrait {
min-height:100%;
overflow:hidden;
}
.carousel:landscape {
min-width:100%;
overflow:hidden;
}

Thank you

[JeroenR]

Check this codenpen. I added 2 ways of handling images, inline and as background.
You can change the values of fitting the images with the dropdowns.

Also on load there is a check whether the image is portrait or landscape. So if you want to go that way, it should also be possible.

[Author]

Posts