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

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">

    
        <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">
    
    
        <div id="icons">
            <div id="contact">
                <img src="/static/imghwm/default1.png" data-src="img/icon_contact.png" class="lazy" alt="">
            </div>
            <img src="/static/imghwm/default1.png" data-src="img/icon_links.png" class="lazy" alt="">
        </div>
    
</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>

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>

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!