Heim > Artikel > Web-Frontend > Wie lässt sich die Größe von Bildern im Browserfenster mithilfe von CSS automatisch ändern?

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

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

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>

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!

JavaScript firefox css chrome html for while auto using this https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：## Können Tabellen die Herausforderung sich wiederholender Kopf- und Fußzeilen auf gedruckten Seiten lösen?Nächster Artikel：## Können Tabellen die Herausforderung sich wiederholender Kopf- und Fußzeilen auf gedruckten Seiten lösen?

In Verbindung stehende Artikel

Mehr sehen