How Do You Prevent Resizing Of Images In CSS?

I have the following code to create a gallery of images. They need to be responsive. But the problem is, when the window width changes, the images also get resized and lose their a

Solution 1:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

and then any images you add simply using the img tag will be flexible

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

You can view the demo regarding maintaining image aspect ratios. See demo.

Solution 2:

To maintain aspect ratio for responsive images you can use height:auto. For example:

img {
    width:100%;
    height:auto
}