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

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

By Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.

Leave a Reply

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