X-cart Product Image Is too Wide under Mobile!

If we set “Maximum product image width” and “Maximum product image height” too big, say set “Maximum product image width” to 500, and set “Maximum product image height” to 250. We can visit the product image at product page properly via pc, but the product image will be too wide under mobile phones.

How can we control the image size and let the width and height to meet the mobile phone automatically then?
We can use css to resolve this issue. Say, we are using light responsive skin, go to “skin/light_responsive/css/” and edit altskin.css.

Find “@media screen and (max-width:767px) ” and add the following css code at the end of “@media screen and (max-width:767px) ”

.content .product-details img {
width: 320px;
height: auto;