Reply To: Image distortion at Zoom

[Andy]

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;
}