3 ms·
Specifying image dimensions is enought to prevent any jumps.
by rimantas 10y ago
Specifying image dimensions is enought to prevent any jumps.
- eknkc 10y agoOn 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.
- kuon 10y agoI 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?
- woof 10y ago<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/ http://scottjehl.github.io/picturefill/
- hinkley 10y agoThis 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.
- eknkc 10y agoWe 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.
- patates 10y ago> 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?
- eknkc 10y agoThis 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.
- woof 10y agoAnd what dimensions would you prefer? Small, medium, large? And what kind of display would you like those for? 1x, 2x or maybe 3x?