[Resolved] Image distortion at Zoom

Please let me know the URL of your website or page so we can take a look to see what is happening.

Thank you.

I cannot see anything wrong.

The image that you are using is 4096px x 2890px but it is slightly blurry in the original image size.
Maybe you could resize the original image to something like 2048px x 1445px? and it would still be large enough but it wouldn’t look blurry

Although we cannot recreate the same problem that you are seeing, I think it may be a CSS conflict between the main WooCommerce stylesheet and WooCommerce’s photoswipe stylesheet that is causing the problem that you are seeing.

Could you please try adding this CSS code to ‘Customize’ > ‘Additional CSS’:

.pswp img {
    max-width: none !important;
}

Let me know if that fixes the issue.

That’s great. Thanks for letting us know.

The issue is that the WooCommerce plugin loads the …/plugins/woocommerce/assets/css/photoswipe/photoswipe.css stylesheet which contains this rule:

.pswp img {
    max-width: none;
}

and then afterwards the …/plugins/woocommerce/assets/css/woocommerce-layout.css stylesheet which contains this rule:

.woocommerce img,
.woocommerce-page img {
    height: auto;
    max-width: 100%;
}

so the max-width: 100% is overriding the correct CSS rule. The zoomed image can be more than 100% wider than it’s container, so this is sometimes restricting the image width.

I don’t like using !important unless absolutely necessary so it should work without it. The custom CSS is loaded after woocommerce-layout.css so will reset the max-width to how it should be.

.pswp img {
    max-width: none;
}