Aspect ratio and object-fit

These aren’t so much of an effect, but are very useful, yet seem to go under the radar, so I wanted to make sure to include them.

If you don’t provide a size for an image, it will use it’s natural size.

If we only provide one size for it, it will resize, using it’s natural aspect ratio.

However, if you provide two sizes, unless they keep the aspect ratio of the original image, it will stretch the image.

See the Pen aspect-ratio and object-fit quicky by Kevin (@kevinpowell) on CodePen.

You may have images where you need a specific width and height on them, and you don’t have full control over the size of the images that are being used, which is causing them to stretch.

To fix that, we can use object-fit, which is essentially background-size, but for <image> elements (it can be used for <video> as well).