CSS -Kraftbild -Größenänderung und das Seitenverhältnis halten

Während des Entwerfens von Websites suchen Entwickler immer nach Möglichkeiten, die Webseite so anzupassen, dass die Bilder oder andere Komponenten in jeder Bildschirmgröße perfekt angezeigt werden. Insbesondere hilft das Cascading Style Sheet oder CSS dazu, einen ordnungsgemäßen Look für die Webseiten zu machen. Es bietet Stylingeigenschaften und Eigenschaften, die dazu beitragen.

In diesem Bericht wird drei folgende drei Methoden gezeigt:

• Methode 1: Kraftbild -Größe und halten Sie das Seitenverhältnis mit “Breite" Und "Höhe”CSS -Eigenschaften
• Methode 2: Erkrankungsbild -Größe und halten Sie das Seitenverhältnis mit “Objektfit”CSS -Eigenschaft
• Methode 3: Erkrankungsbild -Größe und halten Sie das Seitenverhältnis mit “Anzeige: Flex”CSS -Eigenschaft

Voraussetzung: Im Bild der HTML -Datei Bild hinzufügen

Geben Sie vorher die “anElement in der HTML -Datei zum Hinzufügen eines Bildes zum Dokument:

Methode 1: Kraftbild Die Größe und halten Sie das Seitenverhältnis unter Verwendung von CSS -Eigenschaften „Breite“ und „Höhe“

Der "Breite" Und "HöheEigenschaften können verwendet werden, um das Bild anzupassen. Darüber hinaus könnte die Breite Eigenschaft mit einem bestimmten Wert und der Höheneigenschaft mit Auto oder umgekehrt helfen, das Bild zu ändern und das Seitenverhältnis zu führen.

Stil „img“ Element

Der "Das Element wird mit den folgenden Eigenschaften angegeben:

img
Breite: 400px;
Höhe: Auto;

Hier:

• “Breite”Bestimmt die Breite des Bildes.
• “Höhe”Legt die Bildhöhe fest.

Ausgang

Setzen wir nun die Breite als automatisch ein und sehen die Ergebnisse an.

In CSS die "festlegen"Höhe”Eigenschaft mit etwas Wert und“Breite" als "Auto”:

Höhe: 400px;
Breite: Auto;

Die angegebene Ausgabe bedeutet, dass das Bild geändert wurde und das Seitenverhältnis ebenfalls beibehalten wird:

Methode 2: Erkrankungsbild-Größenänderung und halten Sie das Seitenverhältnis mithilfe der CSS-Eigenschaft „Objekt-Fit“

Das CSS “Objektfit”Eigenschaft mit dem Wert“enthalten”Kann verwendet werden, um das Bild anzupassen, ohne das Seitenverhältnis zu beeinflussen.

Wenden Sie dazu die folgenden CSS -Eigenschaften auf die hinzugefügte HTML an" Element:

Breite: 400px;
Höhe: 400px;
Objekt-Fit: enthalten;

Der "Objektfit”Eigenschaft mit dem Wert“enthaltenGibt an, wie ein Bild oder Video geändert werden soll, um in seinen Container zu passen.

Ausgang

Methode 3: Erkrankungsbild -Größenänderung und halten Sie das Seitenverhältnis mithilfe der CSS -Eigenschaft „Anzeige: Flex“

Der "Anzeige”Eigenschaft mit dem Wert“biegen”Legt die Elemente des flexiblen Behälters in eine Zeile (standardmäßig) platziert (standardmäßig).

Beispiel

Erstens fügen Sie eine "hinzu""Mit der Klasse"hauptsächlich”. Dann:

• Fügen Sie zwei Bilder mit den "" "Tags hinzu.
• Der "src" und das "Alt”Attribute werden für die Bild -URL und den alternativen Text des Bildes erwähnt, wenn das Bild in keinem Fall angezeigt werden konnte:

Stil „Haupt“ -Klasse

Der ".hauptsächlich”Wird verwendet, um mit dem angegebenen Klassennamen auf das Element" "zuzugreifen. Die folgenden Eigenschaften werden darauf angewendet:

.hauptsächlich
Anzeige: Flex;
Breite: 100%;

Hier:

• “Anzeige”Eigenschaft mit dem Wert“biegenPlatziert die Bilder hintereinander.
• “BreiteEigenschaft bestimmt die Breite des flexiblen Behälters.

Stil „IMG“ -Element der „Haupt“ -Klasse

.Haupt img
Breite: 50%;
Höhe: Auto;

Der "img”Element hält das“50%"Breite und die"Höhe”Wird als" eingestellt "Auto”Und passt die Höhe des Containers automatisch ein.

Ausgang

Sie haben gelernt, wie man Bilder erzwingt, um die Größe zu ändern, und das Seitenverhältnis in CSS beizubehalten.

Abschluss

Es gibt alternative Möglichkeiten, um das Bild zu ändern und sein Seitenverhältnis in CSS zu halten, z. B. das Festlegen eines bestimmten Werts der “Breite”Eigentum und die“Auto"Wert für die"HöheEigenschaft des Bildes oder umgekehrt. Das CSS “Objektfit”Eigenschaft mit dem Wert“enthaltenIst die beste Methode. Darüber hinaus die “Anzeige: FlexEigenschaft kann auch verwendet werden, um das Seitenverhältnis des Bildes aufrechtzuerhalten. In dieser Beschreibung wurde die Methoden erklärt, um zu demonstrieren.