One little tidbit from my image gallery viewer in January: it seems like many developers know of "cover" and "contain" values for the "background-size" property for elements with background images - "cover" in particular is great for "make as much as possible of this image fit in the space, crop whatever edge is hanging off after your resize - but fewer realize you can do the same thing on an img itself, with the object-fit property - it also has "cover" and "contain" values.
Admittedly it's a little weirder to think about the img kind of resizing itself rather than just scaling a background image, but it can be a better option, especially if you use want to use the <picture> element to declare multiple sources.
No comments:
Post a Comment