Home > Article > Web Front-end > How to Make Images Automatically Resize with Browser Window Using CSS?

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

Linda HamiltonOriginal: 2024-10-26 04:09:02318browse

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>

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>

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>

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!

JavaScript firefox css chrome html for while auto using this https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：## Can Tables Solve the Challenge of Repeating Headers and Footers on Printed Pages?Next article：## Can Tables Solve the Challenge of Repeating Headers and Footers on Printed Pages?

See more

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

Related articles