Skalieren Sie ein Bild in HTML

1. Skalieren eines großformatigen Bildes im Viewport des Browsers in HTML
2. Verwenden Sie die Eigenschaften width und min-width, um ein Bild in HTML zu skalieren

In diesem Tutorial veranschaulichen wir Methoden zum Skalieren großformatiger Bilder in HTML.

Skalieren eines großformatigen Bildes im Viewport des Browsers in HTML

Wir können ein großes Bild in HTML mit den Eigenschaften width und height im Bild skalieren. Ein großformatiges Bild wird vom Bildschirmrand entfernt. Um das Bild auf die Größe des Ansichtsfensters zu skalieren, können wir einen Container verwenden und seine Eigenschaften height und width auf die Höhe und Breite des Ansichtsfensters einstellen. Mit den Einheiten vh und vw können wir die Grösse einstellen. Eine Einheit von vh und vw entspricht 1 % der Höhe und Breite des Viewports. Wir können die Höhe und Breite des Bildes mit der Einstellung auf 100% einstellen. Das Bild sollte in den Container eingefügt werden. Dann passt das großformatige Bild in das Ansichtsfenster.

Erstellen Sie beispielsweise ein div in HTML mit der Klasse container. Schreiben Sie in das div das img-Tag und fügen Sie ein grossformatiges Bild ein. Wählen Sie in CSS die Klasse container aus und setzen Sie deren height und width auf 100vh und 100vw. Wählen Sie als nächstes das Tag img aus und stellen Sie dessen height und width auf 100%.

Im folgenden Beispiel skalieren wir ein großes Bild mit Einheiten wie vh, vw und % so, dass es in das Ansichtsfenster passt.

Beispielcode:

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

Verwenden Sie die Eigenschaften width und min-width, um ein Bild in HTML zu skalieren

Wir können die Eigenschaften width und min-width verwenden, um ein Bild in HTML zu skalieren. Wir können diese Eigenschaften beim Stylen des <img>-Tags verwenden. Die Eigenschaft width gibt die Breite des Elements an. Die Eigenschaft min-width gibt die minimale Breite des Elements an. Sie wird nur angewendet, wenn der Inhalt kleiner als die Mindestbreite ist. Andernfalls hat diese Eigenschaft keine Auswirkung. Außerdem verhindert diese Eigenschaft, dass der Wert der width-Eigenschaft kleiner als min-width ist. Wir bezeichnen bei dieser Methode width und min-width in Pixeln.

Schreiben Sie beispielsweise in den HTML-Body das Tag <img>. Geben Sie im Tag <img> den Pfad zum Bild durch das Attribut src an. Geben Sie dann im Attribut style width von 25vw und min-width von 140px an. Schließen Sie dann das Tag <img> gefolgt von allen zuvor geöffneten Tags.

Wir haben die Eigenschaften width und min-width verwendet, um das Bild zu skalieren. Das großformatige Bild, das nicht in das Ansichtsfenster passt, kann in das Ansichtsfenster passen. Die Breite 25vw im Beispiel unten zeigt, dass die Breite 25 % der Breite des Ansichtsfensters entspricht. Auf diese Weise können wir das Bild mit dem Tag style in HTML skalieren.

Beispielcode:

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />