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%;
}

Answer 1

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.
    }