So legen Sie die Bildgröße in HTML fest

HTML ist eine Auszeichnungssprache, die zum Erstellen von Webseiten verwendet wird. Sie kann Webseiten verschiedene Elemente und Inhalte hinzufügen, darunter Text, Bilder, Audio und Video usw. Unter diesen sind Bilder ein häufiges Element in Webseiten, aber manchmal müssen wir die Größe der Bilder steuern, um sie besser für das Layout von Webinhalten geeignet zu machen. In diesem Artikel erfahren Sie, wie Sie die Größe von Bildern mithilfe von HTML festlegen.

Bild-Tags in HTML

In HTML verwenden wir das img-Element, um Bilder zu Webseiten hinzuzufügen. Das img-Element verfügt über ein src-Attribut, mit dem die URL-Adresse der Bilddatei angegeben wird. Um beispielsweise ein Bild mit dem Namen „example.jpg“ zu einer Webseite hinzuzufügen, können wir den folgenden Code verwenden:

<img src="example.jpg">

Auf diese Weise zeigt der Browser das Bild auf der Webseite an. Allerdings hat dieses Bild möglicherweise eine andere Größe als erwartet, daher müssen wir andere Eigenschaften verwenden, um die Anzeigegröße des Bildes zu steuern.

Bildgröße festlegen

HTML bietet zwei Hauptattribute zum Festlegen der Anzeigegröße von Bildern: Breite und Höhe. Diese beiden Eigenschaften werden verwendet, um die Breite und Höhe des Bildes in Pixel festzulegen. Um beispielsweise die Breite eines Bildes auf 200 Pixel festzulegen, können Sie den folgenden Code verwenden:

<img src="example.jpg" width="200">

Ebenso können Sie den folgenden Code verwenden, um die Höhe eines Bildes auf 150 Pixel festzulegen:

<img src="example.jpg" height="150">

Auf diese Weise , wird das Bild in der angegebenen Breite und Höhe angezeigt. Es ist zu beachten, dass der Browser das Bild automatisch proportional skaliert, um es an den Wert der anderen Eigenschaft anzupassen, wenn nur eine der Eigenschaften festgelegt ist. Wenn beispielsweise nur das Breitenattribut festgelegt ist, berechnet der Browser automatisch den entsprechenden Höhenwert basierend auf dem Breiten-Höhen-Verhältnis des Originalbilds.

Breite und Höhe gleichzeitig festlegen

Zusätzlich zur getrennten Einstellung von Breite und Höhe können Sie diese beiden Eigenschaften auch gleichzeitig festlegen. In diesem Fall wird das Bild gestreckt oder komprimiert, um es an die durch die beiden Eigenschaften angegebene Größe anzupassen. Der folgende Code legt beispielsweise die Breite des Bildes auf 200 Pixel und die Höhe auf 150 Pixel fest:

<img src="example.jpg" width="200" height="150">

Auf diese Weise wird die Größe des Bildes auf 200 Pixel × 150 Pixel festgelegt. Es ist zu beachten, dass die gleichzeitige Einstellung von Breite und Höhe zu einer Verformung des Bildes und damit zu einer Beeinträchtigung des Anzeigeeffekts des Bildes führen kann.

Verwenden Sie CSS, um die Bildgröße zu steuern

Zusätzlich zur Verwendung von HTML-Attributen zum Festlegen der Bildgröße können Sie auch CSS verwenden, um den Anzeigeeffekt des Bildes zu steuern. Konkret können wir die Breiten- und Höheneigenschaften in CSS verwenden, um die Größe des Bildes festzulegen, zum Beispiel:

<img src="example.jpg" style="width:200px;height:150px;">

Ebenso können wir CSS-Stile auch in einem externen Stylesheet definieren, zum Beispiel:

<img src="example.jpg" class="thumbnail">

<style>
.thumbnail {
    width:200px;
    height:150px;
}
</style>

Auf diese Weise Bildelemente mit der Klasse „thumbnail“ können auf der gesamten Website verwendet werden und ihre Größe wird auf 200 x 150 Pixel festgelegt.

Fazit

Das Festlegen der Bildgröße in HTML kann uns dabei helfen, die Anzeige von Bildern auf Webseiten besser zu steuern. Wir können die Attribute width und height verwenden, um die Breite bzw. Höhe des Bildes festzulegen, oder wir können diese beiden Attribute gleichzeitig festlegen, um das Anzeigeverhältnis des Bildes zu ändern. Darüber hinaus können wir mithilfe von CSS die Bildgröße präzise steuern und so Webseiten attraktiver und lesbarer machen.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Bildgröße in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!