Image resize problems with DefaultClean theme

Hi,

Last week I installed nopCommerce 4.2 for the first time and it is working fine. I only have an issue with the uploaded product images.

The size of the uploaded product images are much bigger then the images shown in the webshop. I tried to adjust the Media setting under Configuration but without any results. I also tried to actiivate de default zoom option but this does not shown the image bigger.

I searched on this forum and Google to find answers but without results.

Does anyone know how to do it (i.e. change the file style.css in the map Themes/DefaultClean/Content/css)?

VinceB wrote:

Can you describe what exact problem you are facing? Are you expecting bigger images that you uploaded? The default zoom work by opening an image in nice pop-up like this.

The problem is that the uploaded image has 1980 x 1114 pixels but the image in the zoom option is only 740 x 420 pixels and the image in the product detail is even smaller (see https://shop.secondandnew.nl/images/ForumQustions/Untitled.png).

VinceB wrote:

Okay, I get it. Its because the image zoom option is resized to view 100% in browser. For a zoom that you want to see, it may require some customization or plugin/extension for zoom feature. Here are some of the extensions that you can check.

Regards,

nopAccelerate Team

The problem is also fixed without using the zoom option if the image size in the product detail page is shown bigger. But as I already mentioned, changing the Media settings does not solve the problem.

Does anyone knows how to set the image in the product detail with a bigger size (perhaps some stylesheet changes)?

Yes, that requires changes in stylesheet. And what to change depends on your theme!

I use the DefaultClean theme.

I already changed the '.item-box .picture a img' tag in the style.css file (changed max-width and max-height to 150%) in map Themes/DefaultClean/Content/css, but it only made the image a little bit wider but not higher.

Does anyone knows which other parts of the stylesheet file must be changed in order to make the complete image bigger?

Sorry, I mentioned the wrong tag of the stylesheet. The tag I changed is not '.item-box .picture a img' but '.gallery .picture img, .gallery .picture-thumbs img, .variant-picture img'.

The size settings in the configuration control the size of the image delivered to the browser. You need to insure the setting for your media is large enough to use in your html document.

Keep in mind setting the max-width and max-height probably will not scale up the image, you may need to set the width and height properties as well.


The max properties only set the maximum size a element can scale too, but will not be used unless the actual width or height is greater.

Thanks for the reply, Zambroff ITOS.

Unfortunetly I only understand you partly (my knowlwgde of nopCommerce is limited). Do you have a sample or a more detailed explanation?