5 ms·

I also use the wrapper pattern for my recent projects, but the primary reason is for avoiding layout shifts (I didn't know a simpler solution exists until I rea

by itsuka 4y ago

I also use the wrapper pattern for my recent projects, but the primary reason is for avoiding layout shifts (I didn't know a simpler solution exists until I read this article). The approach is quite different than what the article suggests: rather than setting a specific width and height on the img element, I simply set it to 100% for the wrapper and img elements (and the rest are the same as yours: I set aspect-ratio on the wrapper and object-fit on the img element).

clairity 4y ago
i really dislike wrapper patterns of any kind, as they add needless markup. sure, it's ok if used sparingly to paper over the inadequacies of current html/css, but it's often used excessively nowadays, just like tables in days past. the element itself, not a superfluous wrapper, should provide the parameters necessary (implicitly or explicitly) to specify layout and prevent layout shift. it sounds like the author takes an either-or approach to this, using either aspect-ratio (for design images) or height and width (for content images). having only skimmed, i haven't yet digested why hinting via attr(height) and attr(width) isn't the (future) preferred best-of-both-worlds, other than it not being supported yet ( https://caniuse.com/css3-attr https://caniuse.com/css3-attr ).
- jaffathecake 4y ago
  The lack of support is the only reason, but that's a pretty big reason. Hopefully, in future, web devs will be able to add the same feature to things like iframes via attr(width number) - the number casting will still be necessary.
  - clairity 4y ago
    yah, i can’t wait for attr() to be fully supported. it’s going to both simplify css and reduce js reliance. i’m also really excited by :has() which i think will be the biggest improvement to css since grid. firefox has just started working on it, while safari and chrome already have an initial implementation in place.
- chiefalchemist 4y ago
  Not a fan either. But when working with WordPress it takes extra work to ensure all the images in the srcset have the same aspect ratio. So the only way to ensure cover is object-fit. Note: this is also useful for background images in the sense totoo often the same large HD+ image is served to mobile devices.
jaffathecake 4y ago
Even if you set width and height attributes, you can still set the image to 100% width using CSS. That's how all the examples in the article work. You don't need a wrapper element.

by itsuka 4y ago

clairity 4y ago

i really dislike wrapper patterns of any kind, as they add needless markup. sure, it's ok if used sparingly to paper over the inadequacies of current html/css, but it's often used excessively nowadays, just like tables in days past. the element itself, not a superfluous wrapper, should provide the parameters necessary (implicitly or explicitly) to specify layout and prevent layout shift. it sounds like the author takes an either-or approach to this, using either aspect-ratio (for design images) or height and width (for content images). having only skimmed, i haven't yet digested why hinting via attr(height) and attr(width) isn't the (future) preferred best-of-both-worlds, other than it not being supported yet ( https://caniuse.com/css3-attr https://caniuse.com/css3-attr ).

jaffathecake 4y ago
The lack of support is the only reason, but that's a pretty big reason. Hopefully, in future, web devs will be able to add the same feature to things like iframes via attr(width number) - the number casting will still be necessary.
- clairity 4y ago
  yah, i can’t wait for attr() to be fully supported. it’s going to both simplify css and reduce js reliance. i’m also really excited by :has() which i think will be the biggest improvement to css since grid. firefox has just started working on it, while safari and chrome already have an initial implementation in place.
chiefalchemist 4y ago
Not a fan either. But when working with WordPress it takes extra work to ensure all the images in the srcset have the same aspect ratio. So the only way to ensure cover is object-fit. Note: this is also useful for background images in the sense totoo often the same large HD+ image is served to mobile devices.

jaffathecake 4y ago

Even if you set width and height attributes, you can still set the image to 100% width using CSS. That's how all the examples in the article work. You don't need a wrapper element.