In HTML können wir die Größe jedes Bildes auf folgende Weise ändern:
- Verwendung eines HTML-Tags
- Verwendung eines Inline-Stilattributs
- Verwendung von internem CSS
Verwendung eines HTML-Tags
Hinweis: HTML 5 unterstützt die Höhen- und Breitenattribute von nicht ![]()
Daher müssen wir das Inline-Style-Attribut und interne CSS-Optionen verwenden, um das Bild oder die Bildgröße zu ändern.
Wenn wir die Größe eines Bildes im Dokument mit ändern möchten HTML-Tag welches auf einer Webseite angezeigt werden soll, müssen wir die unten aufgeführten Schritte befolgen. Mit diesen Schritten können wir die Bildgröße ganz einfach ändern:
Schritt 1: Zuerst müssen wir den HTML-Code in einen beliebigen Texteditor eingeben oder die vorhandene HTML-Datei in dem Texteditor öffnen, in dem wir die Größe eines Bildes ändern möchten.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Schritt 2: Platzieren Sie nun den Cursor innerhalb des img-Tags. Und dann müssen wir die Höhen- und Breitenattribute des img-Tags verwenden, um die Größe eines Bildes zu ändern. Also müssen wir diese Attribute eingeben:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
Schritt 3: Und schließlich müssen wir die HTML-Datei speichern und dann ausführen.
Java-Beispielprogramme
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Testen Sie es jetzt
Die Ausgabe des obigen HTML-Codes wird im folgenden Screenshot angezeigt:
Verwendung eines Inline-Style-Attributs
Wenn wir die Größe eines Bildes mithilfe eines Inline-Stilattributs ändern möchten, das auf einer Webseite angezeigt werden soll, müssen wir die unten aufgeführten Schritte ausführen. Mit diesen Schritten können wir die Bildgröße ganz einfach ändern.
Schritt 1: Zuerst müssen wir den HTML-Code in einen beliebigen Texteditor eingeben oder die vorhandene HTML-Datei in dem Texteditor öffnen, in dem wir das Stilattribut zum Ändern der Größe eines Bildes verwenden möchten.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Schritt 2: Platzieren Sie nun den Cursor innerhalb des img-Tag des Bildes, dessen Größe wir ändern möchten. Und dann müssen wir das style-Attribut direkt nach dem src-Attribut eingeben. Und dann müssen wir die Eigenschaft „Breite“ und „Höhe“ in das Stilattribut eingeben, wie im folgenden Block gezeigt:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Schritt 3: Und zum Schluss müssen wir die HTML-Datei speichern und dann ausführen.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>Testen Sie es jetzt
Die Ausgabe des obigen HTML-Codes wird im folgenden Screenshot angezeigt:
Verwenden von internem CSS
Wenn wir die Größe eines Bildes oder Bildes mithilfe eines internen Cascading Stylesheets ändern möchten, das auf einer Webseite angezeigt werden soll, müssen wir die unten aufgeführten Schritte ausführen. Mit diesen Schritten können wir die Größe jedes Bildes ganz einfach ändern.
Schritt 1: Zuerst müssen wir den HTML-Code in einen beliebigen Texteditor eingeben oder die vorhandene HTML-Datei in dem Texteditor öffnen, in dem wir das interne CSS zum Ändern der Größe eines Bildes verwenden möchten.
Autocad-Stretch-Befehl
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
Schritt 2: Jetzt müssen wir den Cursor im Head-Tag des HTML-Dokuments platzieren und dann die Stile darin definieren Tag wie im folgenden Block gezeigt. Und geben Sie dann Folgendes ein Breite und Höhe Attribut in den ID-Selektor ein.
#imagesize { width:100px; height:100px; } Schritt 3: Jetzt müssen wir die ID in das img-Tag des Bildes eingeben, dessen Größe wir ändern möchten:
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> Testen Sie es jetzt Schritt 5: Jetzt müssen wir die HTML-Datei speichern und dann die Datei ausführen. Der folgende Screenshot zeigt die Ausgabe des obigen HTML-Codes:
