Responsive Images With Css

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  
}

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

DMCA.com Protection Status