The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Custom behaviour on image ratio

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #296637

    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…

    object-fit: fill;
    .carousel:portrait {
    .carousel:landscape {

    Thank you


    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.