Last updated on February 25, 2018
Making images responsive (fluid Images) is essential in responsive layouts. Fortunately, it is pretty easy to do with simple CSS Techniques.
For Example, if we have a div Container with 400px width, the image will be 400px, if we resize the div container to 200px the image will be automatically resized to maximum available space, in our case 200px with below-shown CSS.
Responsive Images With Css
img {
max-width:100%;
height:auto;
display:block;
}
Responsive Images in IE8
As I said above, in IE8 Images will not automatically adjust to the Container width, because IE8 render the image height originally, it doesn’t maintain the aspect ratio, in order to make images responsive in IE8 we use can use the following fix, with: auto and height: auto
img {
-ms-interpolation-mode: bicubic; // To resize images in your markup(IE)
max-width: 100%; // Normal Responsive trick
height: auto; //IE8 trick
width: auto; //IE8 trick
}