How to Make Images Resize Automatically with Browser Window Changes in CSS?

Automatically Resize Images with Browser Size Using CSS

Question: I'd like my images to automatically adjust their size as I resize my browser window. However, the code below isn't working:

HTML:

<code class="html"><img src="/static/imghwm/default1.png" data-src="img/icon_contact.png" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="img/icon_links.png" class="lazy" alt=""></code>

CSS:

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

Answer: To enable image resizing with browser resizing, add the following properties to your CSS:

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

This ensures images scale proportionally and automatically adjust to available space when the browser window is resized.

Additional Explanation:

The combination of max-width: 100% and height: auto allows images to expand to their maximum width without exceeding the parent element's width while preserving their aspect ratio. The width: auto9 hack specifically targets IE8, which otherwise ignores max-width when rendering images.

As a result, any images added using the tag will be "flexible," resizing responsively to browser size changes.

Example:

Refer to the following JSFiddle example for a working demonstration: [JSFiddle Link]

This code does not require JavaScript and is compatible with the latest versions of Chrome, Firefox, and IE.

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