How to Make Images Resize Automatically with Browser Size Using CSS?

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.

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

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).

The above is the detailed content of How to Make Images Resize Automatically with Browser Size Using CSS?. For more information, please follow other related articles on the PHP Chinese website!