handling image heights using img/src/sizes with object-fit: cover to overflow width
I have images with object-fit: cover that I need to be full screen images, how can I optimize my images with img, srcset, and sizes when these work exclusively off widths?
See the full screen slider here for my issue: https://2x4miniramps.netlify.app/
You'll see that when the image is landscape, it handles correctly (using width), but when the image is portrait it has no clue how to handle the height.
Actually, I see an inherent problem here with the fact that as soon as you use object-fit: cover, there is no way to truly know the image dimensions anymore...
I'm not sure how to handle this, I can't find anything, I've been wracking my brain for weeks.
29 Replies
Can someone help me with VS Code like using Live Server
you should start a new thread for this, otherwise no one will see it inside someone else's post
my first thoughts are: 1. why do you need so many photos in this slider?
2. instead of trying to find a convoluted code solution, why not just identify 3-4 images of roughly the same size / aspect ratio, and not even worry about it
3. responsiveness. There is a very noticeable delay in updating the image that makes me click the arrow multiple times thinking it didn't register. I would focus on fixing this as my primary issue first
Finally, you need to keep in mind that only like 1% of people ever engage with a slider arrow. The vast majority of your viewers are immediately scrolling past this section looking for content and will never see any of these images anyway
well...
1) That doesn't have anything to do with the question
2) That doesn't have anything to do with the question
3) That doesn't have anything to do with the question
I'm aware of everything you're saying, but instead of answering the question you just shot down the use of a slider. I don't disagree with you about the amount of slides, this isn't finalized. I don't disagree with you about the slider delay, I plan to fix it or lower the transition time. I don't disagree about the engagement with sliders, but I've done a fair bit of research into good UX for sliders and use cases and showcasing products like this where there is no CTA slide to slide is one.
I don't get why you just tore apart my design choice with absolutely zero useful information around solving the question.
I'm not tearing apart your design choice brother
I'm just pointing out that you might be putting a lot of effort into something that doesn't make good use of your time
well, the image need to at least look decent from mobile to desktop, I'm trying to showcase the range of his skill and the enjoyment of his customers, it's not about a CTA so much as just helping people get a feel for the work he does.
I don't disagree about the slider responsiveness, that one really bugs me, but it's likely an easier fix than this
if you feel the images look good enough of desktop, then maybe I'll stop worrying about it
I wish he had higher resolution images, but that's just not the case, unfortunately
I get that, and the images are cool, I would want them shown to. But, I am pointing out that almost no one is going to see them. I've completely stopped using any sliders at this point, from my metrics across dozens of sites, they just never get used
I fully understand, I've had to argue against sliders on ecommerce pages for fortune 500s for years, so I am entirely with you on that
If I had this situation, what I would do is either make a very prominent gallery, or have a nice main hero, and just animate in the images with a nice transition
in this case I think the audience is a bit different
Well, originally I had the images just fading between them with some css animations, but I put the slider back so users can flip through them or return back to a previous image
the problem with #2 is that the images need to be scalable from mobile to desktop, but then I need to work with vertical and horizontal extremes
at least 1080 vertical, which I don't even have photo quality for, so I was exploring AI smoothing and enlarging to maybe stretch that a bit
what about just setting the aspect ratio to 1:1 on all images and centering them
that might work
but I might also just leave the images as is, it's been in the back of my head to just stop messing with them
also setting an explicit width / height in the image to get that aspect ratio will boost your lighthouse score
yep, because CLS
but the issue is, then they don't scale, so I'd have to redesign the entire main landing page area
which is a bit late in the game
what
explicit width and height would be static
when you set a width/height for cls, you aren't defining it in pixels
so it will scale
so set it via css?
let's say you want all your images to be square, in the img tag, you set width="100" height="100" or any other value such that the ratio is 1:1
and it will take your image and make it 100% at that aspect ratio
at any size
web.dev
Optimize Cumulative Layout Shift  | Articles  | web.dev
Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.
this is a pretty good reference, but just keep in mind when you only want to set a number, and not add any unit like px with it, and you should be good 🙂
but the width attribute for img only accepts a number value for a dimension in pixels
so width="100" is 100px
"Modern best practice for setting image dimensions
Modern browsers now set the default aspect ratio of images based on an image's width and height attributes so developers just need to set these, and include the above CSS, to prevent layout shifts:"
ok, but one other issue, I can't set an aspect ratio on a dimension I don't know ahead of time, since the dimensions are the browser window
I'd love an example of what you're suggesting if you can make it quickly
because I've been down this road and I've never seen a solution that actually seems to work
I've tried for quite a while
hence why I was saying, maybe just give up and work on other stuff, lol
what you do is, set it to cover in your css and center it in the window
then lets say you did a 1:1 square image, it will just expand into the image until it fills the entire viewport, by cutting off say the top and bottom of the image
or you can set for desktop an aspect ratio of 16:9, and for mobile a different one for 9:16, and you will get more of the original image in both cases
hmm, ok so use media queries to give a rough ratio
https://codepen.io/sygint/pen/JjxyeBJ
change height to auto in your css
ok
doesn't affect it, because the ratio
you don't need to add ratio either, you can just delete that line
ok
hmm, still has a scroll to it