HTML IMG Scaling

Wenn ein Bild zu einem HTML -Dokument hinzugefügt wird, muss es ordnungsgemäß angepasst werden, um eine bessere visuelle Darstellung der Schnittstelle aufrechtzuerhalten. Insbesondere HTML “img"Skalierung bedeutet, das Bild in Bezug auf verschiedene Parameter wie" anzupassen "Höhe" Und "Breite”Um die Größe des Bildes zu ändern. Ohne Größe oder Skalierung wird die ursprüngliche Größe des Bildes als Standardgröße in der Ausgabe angezeigt. Um die HTML -Bilder zu skalieren, werden die Eigenschaften der CSS „Höhe“ und „Breite“ auf unterschiedliche Weise verwendet.

Dieser Beitrag behandelt die folgenden Ansätze:

• Methode 1: Skalierung eines Bildes unter Verwendung von Prozentwerten
• Methode 2: Skalierung eines Bildes mithilfe von Pixelwerten

Methode 1: Skalierung eines Bildes unter Verwendung von Prozentwerten

Die Entwickler können die CSS anwenden “Höhe" Und "Breite"Eigenschaften auf der HTML"Element und definieren Sie eine beliebige Anzahl von Prozentsätzen im CSS -Stilelement, um die horizontale und vertikale Länge des Bildes entsprechend festzulegen.

Beispiel
Schauen wir uns ein Beispiel für die Größe oder Skalierung des Bildes mit den CSS -Eigenschaften an. Angenommen, wir haben den folgenden Behälter, auf den die CSS -Eigenschaften angewendet werden müssen:

Im obigen HTML -Code -Snippet:

• A "div"Containerelement wurde mit der Klasse hinzugefügt, die als" als "deklariert" hinzugefügt wurdeContainerimage”.
• Innerhalb des "Div" -Tags gibt es das "img"Tag mit dem"Ausweis"Als" deklariert "meine ID" und das "src”Attribut.
• Die genaue Bildadresse aus dem System wurde als Wert der hinzugefügtsrc”Attribut. Dadurch wird das ausgewählte Bild aus dem System im Div -Container in der Ausgabe hinzugefügt.

Jetzt muss die CSS -Eigenschaften auf das obige HTML -Element angewendet werden, um das hinzugefügte Bild zu skalieren:

#meine ID
Breite: 50%;
Höhe: 40%;

Im obigen CSS -Stilelement:

• Der "Ausweis"In der" deklariert "imgElement wird hinzugefügt, um sich auf das zu beziehen" Element.
• Im Div, der “Breite"Eigenschaft ist definiert als"50%”. Dies passt die Breite des Bildes auf dem Bildschirm an, um die Hälfte des horizontalen Bereichs des Bildschirms abzudecken.
• Danach das "Höhe"Eigenschaft wurde auf" eingestellt "40%”Um den Bereich„ 40%“des gesamten vertikalen Bildschirms in der Ausgabe abzudecken.

Dies erzeugt die folgende Ausgabeschnittstelle:

Methode 2: Skalierung eines Bildes mithilfe von Pixelwerten

Wenn die CSS -Änderung von Eigenschaften verändert, bin ich.e., “Höhe" Und "Breite”Werden angewendet, indem Werte für sie in Pixel definiert werden. Es ändert das Bild im Ausgang gemäß dem genauen Pixelwert, anstatt die Größe des Bildes entsprechend dem gesamten Bereich des Bildschirms anzupassen.

Beispiel
Lassen Sie uns die CSS anwenden “Höhe" Und "Breite”Eigenschaften durch Definieren ihrer Werte in“px”(Pixel) zu genau dem gleichen HTML -Snippet, der im vorherigen Abschnitt dieses Beitrags hinzugefügt wurde:

#meine ID
Höhe: 250px;
Breite: 550px;

Im obigen CSS -Code -Snippet:

• Der "Höhe"Eigenschaft wurde auf" eingestellt "250px”. Dadurch wird die Höhe des Bildes auf genau 250 Pixel festgelegt.
• Der "Breite"Eigenschaft wurde auf" eingestellt "550px”Um die Breite auf genau 550 Pixel im Ausgang einzustellen.

Gemäß dem obigen Code wird das hinzugefügte Bild wie folgt skaliert:

So skalieren Sie ein Bild in HTML.

Abschluss

Die Bilder können in einem HTML -Dokument mit dem CSS skaliert oder in einem HTML -Dokument verändert werdenHöhe" Und "Breite" Eigenschaften. Um sie zu nutzen, deklarieren Sie eine "Ausweis" oder ein "Klasse"Für die HTML"Element, fügen Sie den jeweiligen Selektor im CSS -Stilelement hinzu und definieren. Die „Höhe“ und „Breite“ können definiert werden, indem Werte entweder im Prozentsatz oder in den Pixeln hinzugefügt werden. In diesem Blog wurde die Ansätze zur Skalierung von Bildern in HTML besprochen.