syg
KPCKevin Powell - Community
•Created by syg on 11/13/2023 in #front-end
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.
57 replies
KPCKevin Powell - Community
•Created by syg on 11/3/2023 in #front-end
how do I handle IMG srcset and widths together?
Lighthouse is yelling at me to add widths to my images where I use srcset, doesn't this negate srcset and constrain the width to the width attributes value in pixels? How are you supposed to use these together?
8 replies
KPCKevin Powell - Community
•Created by syg on 9/17/2023 in #front-end
Responsive background image that maintains quality
Does anyone have any advice on how to handle background images with
background-size: cover; so they can scale up as the screen expands without becoming pixelated? I'm exploring creating media queries to replace the image at large breakpoints, but the issue is that this image is covering the entire background of the page, so I need to scale vertically and horizontally, while accounting for both potentially pixelating the image. I wrote a postcss plugin for this (https://github.com/sygint/postcss-11ty-responsive-bg-img) , but it's clear to me I need to make it more robust, just curious if anyone has experience with this issue or has some articles I can read, or any advice either way.3 replies