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.
Top comments (2)
flex, grid, and all its family.
Cool stuff. I gotta learn grid better. I’m used to making a whole bunch of divs 😩