Hacker News Reader

Comment by itsuka | Hacker News Reader

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

View on HN

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

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.

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.

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.

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.

Reply on news.ycombinator.com