How to Make Images Automatically Resize with Browser Window Using CSS?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-10-26 04:09:02

Original

323 people have browsed it

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

Automatically Resize Images Using CSS Browser Size

Problem:

Your images do not automatically resize when you resize your browser window. You have tried the following code but it does not work:

HTML:

<code class="html"><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html></code>

Copy after login

CSS:

<code class="css">body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


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

Copy after login

Solution:

To make your images flexible, add the following CSS properties:

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

Copy after login

By setting max-width to 100%, the image will never exceed the width of its container. Setting height to auto allows the image to maintain its aspect ratio while resizing. The width: auto9 override is necessary for IE8 compatibility.

With these properties in place, any images you add using the img tag will be automatically resized to fit the size of your browser window.

JSFiddle Demo:

You can see a live demonstration of this solution in this JSFiddle:

https://jsfiddle.net/mjc5ue0z/

No JavaScript is required for this solution. It works in the latest versions of Chrome, Firefox, and IE (tested versions).

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