4

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%;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
John_911
  • 1,124
  • 2
  • 21
  • 38
  • 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 Apr 20 '16 at 20:52
  • In lieu of that, assuming you're designating your images via `background-image` instead of as `img` tags, check out https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch – abluejelly Apr 20 '16 at 20:52
  • Here is the answer: You need to know the height and the width of your images. http://stackoverflow.com/questions/29778235/can-i-use-picture-for-both-height-and-width-constrained-images – alexander farkas Apr 20 '16 at 21:24
  • @abluejelly - I've updated with a link to a codepen that hopefully exhibits my issue – John_911 Apr 20 '16 at 21:30
  • @alexanderfarkas - I've updated with a link to a codepen that hopefully exhibits my issue – John_911 Apr 20 '16 at 21:30
  • @alexanderfarkas I just read [this article based on your answer you linked to](http://codepen.io/tigt/post/when-responsive-images-get-ugly#height-and-width-constrained-srcset). Now I'm thinking that my situation is not possible since I am mixing aspect ratios. 2:3 for portrait images. 3:2 for landscape images. Do you have a solution for this? – John_911 Apr 20 '16 at 22:33
  • is there any reason that you can't use javascript? – Zze Apr 20 '16 at 22:37
  • @Zze I could, but not sure how it would really fit in with the sizes attribute. Have a solution? – John_911 Apr 21 '16 at 00:06

1 Answers1

8

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.
    }
PhantomPepper
  • 103
  • 1
  • 7