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.