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


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.


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:

Media editing tool

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.