add this style="background-size: contain;max-width: 100%; height: auto;" to your img code.
Example: <img style='background-size: contain;max-width: 100%; height: auto;' src="/some/pic.jpg">

This code is really essential because in responsive mode on a phone it will cause images to be cut off and unviewable past the width of the device.

Another nice trick is to add this as css to the img tag based on maximum screen width (this way no html code has to be changed):

@media only screen and (min-width: 300px) and (max-width:1024px) {
       img {
        background-size: contain;max-width: 100%; height: auto
           }
}

If you want to center the image use this:

margin-left:auto;margin-right:auto

       img {
        background-size: contain;max-width: 100%; height: auto; margin-left:auto;margin-right:auto

           }

css, responsive, imagesadd, quot, contain, width, height, auto, img, src, pic, jpg, essential, mode, images, unviewable, maximum, html, min, px, margin,

Latest Articles