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 on the product page properly via pc, but the product image will be too wide under mobile phones.
How can we control the image size and set 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;
}