The problem you are facing is not the inline styles overriding the css rules because, by default, OpenCart css files don't set css properties for the width and height of the images in the category page.
OpenCart automatically resizes the images according to what you set in the Admin (in your case 400x400). Since there are no css rules, the displayed dimensions will be the image size.
To fix it you can try either of the following:
- In your main css file, Look for
.product-list .image img and add
height tags with a percentage value. Since you mentioned that you are trying to get a responsive site, you may need to have separate css files for different screen sizes. The problem that you may face is that if you are resizing the images to 400x400 pixels but your css definitions are scaling up the image to a bigger size (let's say 600x600 pixels), you will get a pixelated image that will look like low resolution. To fix it, look at the 2nd option.
OpenCart resizes the images in order to enhance performance and save
on bandwidth. In the controller file,
catalog/controller/product/category.php, around line 213 you will
see the following line:
$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'),
This is the code that tells OpenCart to resize the image to the
dimensions you defined in your Admin settings. If you wanted a
responsive width and height, you can detect the user's device (with
an opensource package like MobileDetect http://mobiledetect.net/)
and adjust the resize dimensions according to the device used.
- By resizing dynamically you are preventing the image to be pixelated, assuming that your original image is bigger than the requested size, and at the same time you are increasing performance and saving on bandwidth.
Hope this helps!