Automatically Resize Images with Browser Size Using CSS

You want your images to resize automatically when you resize your browser window, but the provided code isn't working. Let's investigate a solution.

To make the images flexible, you'll need to add max-width: 100% and height: auto to them. However, IE8 has a bug where this doesn't work. To fix it, add width: auto\\9 for IE8.

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

Any images added using the img tag will now automatically resize.

To illustrate, here's an example JSFiddle that doesn't require JavaScript. It's compatible with the latest versions of Chrome, Firefox, and IE (based on testing).