So you’ve built a perfect grid with perfectly sized product thumbnail images, perhaps in a squared size, but whenever the client uploads images with an incorrect size, they will be squished into the rectangle, potentially being incorrectly resized. You could avoid resizing issues with background-size, but what if you have to deal with good ol’ source images?
We can use object-fit to achieve just that. object-fit: contain; “letterboxes” the images, preserving their aspect ratio. Alternatively, object-fit: cover; has the same effect as background-size: cover;, with every pixel in the element filled with the image, and the “leftovers” on each side cropped out.
Finally, object-fit: none; leaves the images at its original size and correct aspect ratio, but focuses at its center, with overflow cropped. Just one thing to keep in mind: for object-fit to work, we need to define both width and height of the box. The property is supported in Chrome, Safari, Opera and Android, and is coming to Firefox soon. You can also use a polyfill to make it work in legacy browsers.
Thank you to Smashing Magazine for this article and idea.
