So verhindern Sie, dass Bilder mit CSS gestreckt werden

CSS-Technologie spielt eine sehr wichtige Rolle im Webdesign. Durch CSS können wir nicht nur alle Aspekte des Webseitenstils steuern, sondern auch viele schöne, ordentliche und voll funktionsfähige Webseiteneffekte erzielen. Unter ihnen ist die Anzeige und Steuerung von Bildern eine der Technologien, die uns am meisten am Herzen liegen und die wir beherrschen müssen. In vielen Fällen müssen wir dafür sorgen, dass die Bilder entsprechend den Designanforderungen auf der Webseite angezeigt werden, anstatt sie zu strecken oder zu komprimieren. In diesem Fall müssen wir die CSS-Technologie verwenden, um dies zu erreichen.

Zunächst müssen wir einige grundlegende Konzepte im Zusammenhang mit der Bildgröße verstehen: Der von Bildern auf einer Webseite eingenommene Platz hat zwei Dimensionen, nämlich Breite und Höhe. Daher müssen wir die Breiten- und Höhenattribute des Bildes festlegen. In CSS entsprechen diese beiden Attribute der Breite bzw. der Höhe.

Zum Beispiel können wir den folgenden CSS-Code verwenden, um die Breite des Bildes auf 300 Pixel und die Höhe auf 200 Pixel festzulegen:

img{
    width: 300px;
    height: 200px;
}

Der obige Code kann auf alle img-Tags angewendet werden und Sowohl Breite als auch Höhe sind auf 300 Pixel und 200 Pixel eingestellt. Dies hat zur Folge, dass das Bild unabhängig von der tatsächlichen Größe auf der Webseite auf 300 Pixel und 200 Pixel gestreckt oder komprimiert wird.

Allerdings möchten wir in vielen Fällen nicht, dass das Bild gestreckt oder gestaucht wird, sondern seine ursprünglichen Proportionen und Abmessungen beibehalten. An diesem Punkt müssen wir verschiedene Methoden anwenden.

Die erste Methode besteht darin, die maximale Breite und maximale Höhe des Bildes festzulegen. Dies hat zur Folge, dass, wenn die Größe des Bildes kleiner als die maximale Breite und maximale Höhe ist, es entsprechend der Originalgröße gerendert wird; wenn die Größe des Bildes größer als die maximale Breite und maximale Höhe ist Es wird proportional reduziert, bis es der maximalen Breite und maximalen Höhe entspricht.

Zum Beispiel können wir die maximale Breite des Bildes auf 300 Pixel und die maximale Höhe auf 200 Pixel festlegen, indem wir den folgenden CSS-Code verwenden:

img{
    max-width: 300px;
    max-height: 200px;
}

Der obige Code stellt dies auf jeden Fall sicher der tatsächlichen Größe des Bildes. Es wird jedoch nicht gestreckt oder gestaucht, sondern behält seine ursprünglichen Proportionen und Abmessungen bei und passt sich gleichzeitig der maximalen Breite und maximalen Höhe an.

Die zweite Methode besteht darin, die Größe des Bildes auf adaptiv einzustellen. Dies hat zur Folge, dass die Größe des Bildes automatisch an die Größe des Containers angepasst wird, in dem es sich befindet, wobei die Proportionen unverändert bleiben.

Zum Beispiel können wir die Breite und Höhe des Bildes über den folgenden CSS-Code auf 100 % festlegen:

img{
    width: 100%;
    height: auto;
}

Im obigen Code setzen wir die Breite auf 100 % und die Höhe auf 100 % setzen, was bedeutet, dass die Breite des Bildes automatisch entsprechend der Breite des Containers, in dem es sich befindet, angepasst wird und die Höhe automatisch basierend auf der Breitenänderung berechnet wird um die ursprünglichen Proportionen beizubehalten.

Zusammenfassend lässt sich sagen, dass wir, wenn wir die Größe eines Bildes steuern müssen, der Verwendung der Attribute „Maximale Breite“ und „Maximale Höhe“ Vorrang einräumen oder die Größe auf „Adaptiv“ einstellen sollten. Diese Methoden können sicherstellen, dass der Anzeigeeffekt des Bildes nicht durch Dehnung und Komprimierung beeinträchtigt wird, während die ursprünglichen Proportionen und Größen erhalten bleiben, wodurch die Anzeige der Webseite schöner und komfortabler wird.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass Bilder mit CSS gestreckt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!