Inline CSS on a <img> with no class nightmare - css

Question

I hope you guys can give me a hand on this one because I’m at my rope’s end with this piece of inline CSS nightmare. So. I want to have two columns of product categories, changing the size of the actual columns wasn’t hard but I have the problem with the blurry images. They are way bigger than the div but they still look blurry.
Inspecting the .prod-img-wrap div reveals it contains a tag with no class or ID that has some in-line CSS that I assume it’s probably generated elsewhere.
All the sollutions online show a older version of WooCommerce that still had actual inputs for the image sizes separately, now in the Customize > Woocommerce > Product images panel there’s only the crop options available. If I change the hard coded values in the inspector, the image loads fine, so I know it’s uploaded correctly.
I don’t even know what else to try at this point, I’ve been going at it for too long and it’s literally one of the last few details that I need to get sorted to deliver this website soon. I’m also quite unexperienced in WordPress so this might be a easy or obvious one for the more seasoned coders amongst you. Any help would be greatly appreciated, thank you so much for your time.
The page I need help with: http://sellgoldnow.co.uk/
EDIT:
I am trying to override with css the inline style generated here:
<div class="prod-img-wrap"><img src="http://sellgoldnow.co.uk/wp-content /uploads/2018/09/gold-bracelets1-262x108.jpg" alt="Bracelets" sizes="(max-width: 262px) 100vw, 262px" width="262" height=""></div>
With the following css:
.prod-img-wrap img[style]{
max-width: 705px !important;
width: 705px !important;
height: auto !important;
}
This is the part that I don't know how to "target" as I'm unfamiliar with the formulation, it's the first time i've seen it.
sizes="(max-width: 262px) 100vw, 262px" width="262" height=""

Answer 1

firstly, the images are blurry because their actual size is much much smaller than the area they are being made to fill. [they are only 262px x 108px and they are being stretched to 703 x 277px] So i would say you need to be adding larger images.
Secondly, if you are adding much larger images and the woocommerce is cropping it, try the plugin "Regenerate Thumbnails" [has million+ downloads]and go through those steps.
Lastly once you have added larger images and its still not working correct, try changing the thumbnail cropping settings in customiser. I would suggest 1-1 or uncropped.
Let me know if this helps!
EDIT:
to target those images you can use this class + code to override it:
ul.products li.product.product-category img,
ul.products li.product img {
max-width: none!important;
width: auto!important;
}
this will ensure those images display at their actual size.