DEV Community

with Pyaar
with Pyaar

Posted on

 

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
felipperegazio profile image
Felippe Regazio

flex, grid, and all its family.

Collapse
 
withpyaar profile image
with Pyaar

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

šŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.