Hacker News Reader

Comment by rimantas | Hacker News Reader

Specifying image dimensions is enought to prevent any jumps.

On mobile, we mostly do percentages on images due to varying display sizes. Gets ridiculous when you want to specify the dimension, because you can't. We need to specify aspect ratios and css does not provide that.

Went with a padding-top + absolute position in wrapper hack at the end. That jumpiness is part the tooling problem.

I know it's a hack, but what is wrong with it? I've always been using that and it works.

I haven't looked in details into the new srcset and size attributes of image, but won't that help also?

<picture> with multiple srcset makes it possible to serve images that are displayed at 100% width, filling their (DOM) container.

Check out http://scottjehl.github.io/picturefill/

This is why I use vh, vw for proportional images at mobile breakpoints.

You still have to know the aspect ratio of the original image of course, but it does help.

We decided not use use viewport relative units for some reason I can't remember. I guess we had paddings etc in pixels and that would mean using calc() and that's another can of worms.

On a second thought, cw, ch as in container width, height would be a great addition.

> On a second thought, cw, ch as in container width, height would be a great addition.

Isn't that achieved by just defining height and width in percentages?

This would allow `height: 50cw`. Then we can define specific aspect ratios like `width: 100cw; height: 50cw;` would force image to have 2:1 aspect ratio.

And what dimensions would you prefer?

Small, medium, large?

And what kind of display would you like those for?

1x, 2x or maybe 3x?

Reply on news.ycombinator.com