Fitting portrait and landscape images in a full screen image carousel

Question

I am creating a full screen lightbox slideshow/carousel and am using srcset to serve the best fitting image.

However, I am unsure of how to go about this problem since my pictures are of both orientations - landscape and portrait.

Depending on image aspect ratio, image size, and screen size, it will max out at width first for some images and height for other images.

There are also cases where all images max out at width first (think portrait orientation) or height first (think landscape orientation).

tl;dr - It's never always width or height that gets maxed out === It's complicated

How the heck am I suppose to write this as a media query for the sizes attribute? I don't even know where to begin.

For Code and Visual Example, I created a pen - Go to Pen

HTML

<div class="container">
  <img src="image.jpg">
</div>
<div class="container">
  <img src="image-2.jpg">
</div>

CSS

.container {
  display: flex;
  height:100vh;
  width:100vw;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
  max-width:100%;
  max-height:100%;
}

I believe you're going to have the best results if you pre-emptively tag your pictures as either portrait or landscape in some way (such as a class or a ?p vs ?l at the end of their src), and pick on that (with the max- sizing as the full viewport). Either that, or you're gonna have to deal with JS for this, as I don't believe CSS can naturally look at it and @media will get messy. — abluejelly
In lieu of that, assuming you're designating your images via background-image instead of as img tags, check out stackoverflow.com/questions/11757537/… — abluejelly
Here is the answer: You need to know the height and the width of your images. stackoverflow.com/questions/29778235/… — alexander farkas
@abluejelly - I've updated with a link to a codepen that hopefully exhibits my issue — John_911
@alexanderfarkas - I've updated with a link to a codepen that hopefully exhibits my issue — John_911

PhantomPepper PhantomPepper · Accepted Answer · 2018-07-19T05:05:09

So if I understand correct - you should be able to acheive this with Object-fit.

So you could try something like this:

    ...
    img {
    height: 100%;
    width: 100%;
    max-height: 100vh;
    max-width: 100vh;
    object-fit: contain; // this will fill the view window without losing aspect ratio.
    }

Fitting portrait and landscape images in a full screen image carousel

1 Answers