January 22, 2021
image resizing in browser
I came across a comprehensive article on image resizing. I found several points interesting:
- Specifying both width and height on an image in css will lose its aspect ratio
- Specifying width and
height: auto
will keep its aspect ratio - Specifying
width: 100%
might scale the image up to fit parent width - Specifying
max-width: 100%
will scale image down to fit parent width but never up
Yet to try object-fit
and object-position
CSS properties.
Avoid client side resizing and serve correctly sized images from server
I think the appropriate solution will differ from use case to use case. Actual image and then thumbnail sizes, for example. Then again there's img srcset which I have yet to try out as well.
Ooo, much to explore.