Maintaining product image size and aspect ratio in Weebly

Question

I am using Weebly to design an eCommerce site. I am having issues with the product element images, The images appear to twice the size from original upload, i do not have access to any other images as the client provided these for me.

I cant seem to get the images to retain the "Natural" size.

I have tried changing what I think is the relevant CSS; and added the following;

div.wsite-com-product-images-main-image,.wsite-com-product-images-main image{width: 100% !important;Height: 100% !important;}

and

.mousetrap{display:none;}

Neither appear to be working, it might be a .js query thats running a calculation in order to resize the images but i can find the relevant code.

website is https://www.exoticcarving.com/

example page: https://www.exoticcarving.com/store/p117/Wooden_Bear_%28log%29%2C_handmade_from_suar_wood.html

Would really appreciate some help with this please

Answer 1

Did you want something like this?

 .small img { width: 200px; height: 400px; object-fit: contain; } .img-small { width: 200px; height: auto; } 

 <div class="small"> <img src="https://www.w3schools.com/css/paris.jpg" /> </div> <img src="https://www.w3schools.com/css/paris.jpg" class="img-small" /> <img src="https://via.placeholder.com/1000x1000" class="img-small" /> <img src="https://via.placeholder.com/4000x3000" class="img-small" /> 

Setting a width and having the height property set to auto will scale the image properly. On the other hand, here's a reference to object-fit :)

Also, here's a working example . :)