woocommerce images in gallery blurry

Hi there,

The issue is definitely coming from this CSS you've added:

@media(min-width: 769px) {
    .woocommerce ul.products li.product a img {
        width: 250px !important;
        height: 250px !important; 
    }
}

I'm not aware of a CSS solution to keep them square and not changing the quality at the same time unfortunately.

The best solution would be to upload images that are already in 1:1 ratio (square) so you can use either width or height property in the CSS to avoid the blurry-ness.

ok thanks, its going to be a marketplace so multiple vendors uploading images so thats going not be possible

so its not possible then? as long as i know i can tell my client.

Thanks
John

Unfortunately not.

Restricting both width and height property with CSS doesn't really work well.

ok thanks,can the images be zoomed instead somehow using something other than css then that still makes them cropped and square, but not blurry?

thanks
John

Hi there,

unfortunately there isn't a lot that can be done when dealing with lots of irregular size images.

I did find this plugin - haven't tested it but may be worth a shot:

https://wordpress.org/plugins/smart-image-resize/