Wie lässt sich die Größe von Bildern im Browserfenster mithilfe von CSS automatisch ändern?-CSS-Tutorial-php.cn

Wie lässt sich die Größe von Bildern im Browserfenster mithilfe von CSS automatisch ändern?

Linda Hamilton

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

Original

405 Leute haben es durchsucht

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

Größe von Bildern mithilfe der CSS-Browsergröße automatisch ändern

Problem:

Ihre Bilder werden nicht automatisch angepasst Ändern Sie die Größe, wenn Sie die Größe Ihres Browserfensters ändern. Sie haben den folgenden Code ausprobiert, aber er funktioniert nicht:

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Lösung:

Um Ihre Bilder flexibel zu gestalten, fügen Sie die folgenden CSS-Eigenschaften hinzu:

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

Nach dem Login kopieren

Wenn Sie die maximale Breite auf 100 % festlegen, überschreitet das Bild niemals die Breite seines Containers. Wenn Sie die Höhe auf „Automatisch“ einstellen, behält das Bild bei der Größenänderung sein Seitenverhältnis bei. Die Überschreibung von width: auto9 ist für die IE8-Kompatibilität erforderlich.

Wenn diese Eigenschaften vorhanden sind, wird die Größe aller Bilder, die Sie mithilfe des img-Tags hinzufügen, automatisch an die Größe Ihres Browserfensters angepasst.

JSFiddle-Demo:

Sie können eine Live-Demonstration dieser Lösung in diesem JSFiddle sehen:

https://jsfiddle.net/mjc5ue0z/

Für diese Lösung ist kein JavaScript erforderlich. Es funktioniert in den neuesten Versionen von Chrome, Firefox und IE (getestete Versionen).

Das obige ist der detaillierte Inhalt vonWie lässt sich die Größe von Bildern im Browserfenster mithilfe von CSS automatisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!