Responsive images

In order to create responsive image you need to add  max-width:100% property to <img> and set width and height properties to auto.  The width and height could be omitted if there were no predefined values for them.

img{
    max-width:100%;
}

The width of parent container should be set in percent or can be omitted if there was no predefined value for it.

Note!!! Using max-width property for images which are inside elements with  display: table; or display: table-cell; property  doesn’t work in Fire Fox and Internet Explorer. In this case browser sets width of  the parent container to the width of the largest image.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.