DEV Community

loading...

Object-Fit CSS Property is my Favorite, What's your favorite Property?

Jamie
Web Designer and Developer. | Art Writer.
惻1 min read

I love Object-Fit because, resizing images is the worst. Having to crop images to fit inside a gallery can be annoying when your programs are running slow or you're in rush. Resizing using CSS is an option you should consider.

Let's say you have different sized images, and you want to create a gallery of images 300px x 300px or a consistent width and height. How would you go about accomplishing this? Let me know in the comments. I usually crop if I don't intentionally make the images the same image size. I was in a time crunch, my photo editor kept crashing, so I searched "resize image css" and the property I was looking for, popped up, and voila: Object-Fit. Below is the code I used to resize my images.

.resize {
object-fit: cover; /* The image keeps its original aspect ratio and the image area is completely covered. */
width: 300px;
height: 337px;
}

Here is a link to the article I found: https://alligator.io/css/cropping-images-object-fit/

One thing I wonder is if the original image, although cropped, has an impact on load time if the dimensions aren't intrinsically reduced.

Discussion (2)

Collapse
felipperegazio profile image
Felippe Regazio

flex, grid, and all its family.

Collapse
jamiepo profile image
Jamie Author

Cool stuff. I gotta learn grid better. Iā€™m used to making a whole bunch of divs šŸ˜©