Images not aligning correctly

Question

I am trying to upload new images to a website which was built by a developer. I know my image sizes are wrong but what is the best way to ensure all images are the same size in the browser?

Answer 1

Assuming this is implemented using image size feature what you want is so-called "hard crop" mode. That will make image fit dimensions exactly, possibly cutting of their parts.

What you seem to have is soft/proportional crop mode, which tries to fit image in roughly into dimensions, while preserving all of image.

See crop mode in documentation for technical details.

If you want to get around this without messing with code, then your best option is to figure out target dimensions and upload images that have exact same ratio. That will make them fit existing setup, but is more work preparing them before upload.

Answer 2

From the looks of it, it seems like your original image sizes are all different (except for the last two). For clean and consistent images, it's best to make sure they are all set to the appropriate size to fit before uploading them.

Otherwise, you can also use the built-in media tool to set the desired sizes to fit:

Also, however your product items are displayed, It doesn't look like they automatically have a set width and height set to ensure all of the images follow the same dimensions. But that's just from looking at the screenshot and not the source code.