Bildgröße in CSS ändern

1. Verwenden Sie die Eigenschaften max-width und max-height, um die Größe des Bildes in CSS zu ändern
2. Verwendung der Eigenschaft object-fit zur Größenanpassung des Bildes in CSS
3. Verwenden Sie den Wert auto für die Breite und die Eigenschaft max-height, um die Größe des Bildes in CSS zu ändern

In diesem Artikel werden Methoden zum Ändern der Größe eines Bildes in CSS vorgestellt, um es proportional in ein div einzupassen, wobei seine Höhe und Breite beibehalten werden.

Verwenden Sie die Eigenschaften max-width und max-height, um die Größe des Bildes in CSS zu ändern

Immer wenn wir ein Bild in HTML einfügen, nimmt das Bild die Gesamtpixel seiner Größe ein. Wenn sich das Image in einem bestimmten Container befindet, kann die Größe des Image manchmal größer als die Größe des Containers sein. Das Bild wird mehr Platz auf dem Bildschirm einnehmen; es nimmt Bereiche von anderen Elementen. Infolgedessen folgt die Webseite nicht unserem Design und wird unattraktiv. Um dieses Problem zu beheben, können wir die CSS-Eigenschaften max-width und max-height verwenden, um die Größe des Bildes automatisch an die Größe des Containers anzupassen. Diese Eigenschaften legen die maximale Höhe und Breite eines Elements fest. Hat der Inhalt des Elements mehr Breite und Höhe als die Eigenschaften max-width und max-height, werden ihre Grössen mit dem Wert dieser Eigenschaften angepasst. Wenn ihre Größen jedoch klein sind, tritt keine Wirkung auf. Wir können die Eigenschaften max-height und max-width auf ein Element setzen, und somit passen die Elemente im Container ihre Größe an.

Erstellen Sie beispielsweise ein div mit der Klasse cat in HTML. Fügen Sie innerhalb des div ein Bild mit dem <img>-Tag ein. Wählen Sie in CSS das Tag img aus und weisen Sie den Eigenschaften max-width und max-height 100% zu. Wählen Sie dann die Klasse cat und geben Sie height und width von 200px und 200px an.

Im Beispiel unten haben wir ein zufälliges Bild von LoremFlickr eingefügt, das 300px von width und height hat. Aber der Container cat hat eine Höhe und Breite von 200px. Da wir die Eigenschaften max-height und max-width verwendet haben, schrumpfen die grösseren Bilder auf die Grösse des Containers. Daher haben wir die Größe des Bildes automatisch angepasst.

Beispielcode:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 max-width: 100%;
 max-height: 100%;
}
.cat {
 height: 200px;
 width: 200px;
}

Verwendung der Eigenschaft object-fit zur Größenanpassung des Bildes in CSS

Wir können die Eigenschaft object-fit in CSS verwenden, um die Größe des Bildes an seinen Container anzupassen. Ein Container kann größer oder kleiner als das Bild sein. Die Eigenschaft ermöglicht es uns, das Bild oder die Videos entsprechend der Größe des Containers anzupassen. Mit der Eigenschaft object-fit können wir festlegen, wie das Bild passt. Die Eigenschaft nimmt Werte wie fill, contain, cover, none und scale-down an. Wir können den Wert contain verwenden, damit das größere Bild auf die angegebene Dimension des Containers schrumpfen kann.

Fügen Sie beispielsweise ein Bild mit der Höhe und Breite von 600px mit dem Tag img wie im ersten Beispiel ein. Wählen Sie in CSS das Tag aus und setzen Sie Höhe und Breite auf 100%. Verwenden Sie den Wert contain in der Option object-fit. Wählen Sie dann die Klasse cat aus und geben Sie dem Container die Höhe und Breite von 300px an.

Hier haben wir ein Bild eingefügt, das größer ist als die Größe des Containers. Das Bild ist 600px, während der Container nur 300px hat. Mit der Eigenschaft object-fit können wir das Bild auf die Abmessungen des Containers verkleinern. So können wir die Größe des Bildes automatisch ändern.

Beispielcode:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

img {
 height: 100%;
 width: 100%;
 object-fit: contain;
}
.cat {
 height:300px;
 width: 300px;
}

Verwenden Sie den Wert auto für die Breite und die Eigenschaft max-height, um die Größe des Bildes in CSS zu ändern

Wir können den Wert auto für die Breite verwenden und die Eigenschaft max-height setzen, um die Breite eines Bildes anzugeben, das in einen Container passt. Wir werden die Höhe des Bildes auf die Höhe des Containers verkleinern. Fügen Sie beispielsweise ein Bild wie oben in HTML ein und setzen Sie die Höhe des Containers auf 200px in CSS. Als nächstes wählen Sie das Tag img aus, setzen die Breite auf auto und setzen die Eigenschaft max-height auf 100%.

Im Beispiel unten hat das Bild anfangs 400px Höhe und Breite. Die Höhe des Containers haben wir auf 200px gesetzt. Die auf 100 % gesetzte Eigenschaft max-height verkleinert das Bild auf 200px. Daher haben wir die Höhe des Bildes entsprechend der Höhe des Containers angepasst.

Beispielcode:

<div class="cat">
    <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" />
</div>

.cat {
 height:200px
}
img {
 width: auto; 
 max-height: 100%; 
}