Ein Bild in HTML zuschneiden

1. Verwenden Sie die CSS-Eigenschaften width, height und overflow, um das Bild in HTML zuzuschneiden
2. Verwenden Sie die CSS-Eigenschaften object-fit, um Bilder in HTML zuzuschneiden

In diesem Artikel stellen wir Methoden zum Zuschneiden eines Bildes in HTML vor.

Verwenden Sie die CSS-Eigenschaften width, height und overflow, um das Bild in HTML zuzuschneiden

Neben width und height besitzen CSS-Container auch eine overflow-Eigenschaft, die zum Zuschneiden von Bildern verwendet werden kann. Um die Overflow-Eigenschaft zu aktivieren, sollten wir das Bild in ein div einer bestimmten Breite und Höhe einschließen und overflow auf hidden setzen. Dadurch wird sichergestellt, dass der Basiscontainer seine Struktur behält und jeder Bildüberlauf hinter dem Container verborgen wird. Schließlich können wir die Eigenschaft margin verwenden, um den zugeschnittenen Bereich anzupassen. Diese Eigenschaft nimmt vier Werte an. Von den vier Werten sind jedoch nur der erste und der letzte wichtig, da sie die Pixel von oben bzw. links darstellen.

Fügen Sie beispielsweise das Bild mit der URL https://tinyurl.com/k764en3w in zwei verschiedene Container ein. Geben Sie dem zweiten Bild die Klasse cropped, damit wir einige Stile darauf anwenden und das Bild zuschneiden können. Wählen Sie in CSS die Klasse cropped aus und setzen Sie height und width auf 150px. Setzen Sie die Eigenschaft overflow auf hidden. Als nächstes erstellen Sie einen Rahmen. Wählen Sie nun das Tag img der Klasse cropped aus und setzen Sie den Rand als margin: -10px 0px 0px -180px.

Auf diese Weise können wir ein Bild in HTML mit CSS zuschneiden.

Beispielcode:

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

Verwenden Sie die CSS-Eigenschaften object-fit, um Bilder in HTML zuzuschneiden

Die CSS-Eigenschaft object-fit hilft beim Zuschneiden der Bilder. Es kann fünf Werte haben, aber der Wert cover ist am besten geeignet, um ein Bild zuzuschneiden. Wenn Sie object-fit auf cover setzen, wird das Seitenverhältnis des Bildes beibehalten, während es noch in die Größe des Inhaltsfelds passt. Wir können auch die Eigenschaft object-fit in Verbindung mit object-position verwenden, um den zu beschneidenden Bildbereich anzupassen. Die Eigenschaft object-position erfordert zwei Werte: x% und y%, um das Bild zu positionieren (die Standardposition ist 50% 50%). Wir können auch Pixelpositionen angeben: xpx und ypx, aber das ist normalerweise nicht sinnvoll.

Fügen Sie das Bild beispielsweise dreimal ein. Das erste Bild ist das Originalbild und die beiden Bilder sind die zugeschnittenen Bilder. Geben Sie dem zweiten und dritten Bild die Klassen cropped1 und cropped2. Legen Sie eine bestimmte Breite, Höhe und einen Rand für diese Bilder fest. Verwenden Sie die Eigenschaft object-fit und stellen Sie sie auf beiden Bildern auf cover. Setzen Sie im dritten Bild die Eigenschaft object-position auf 20% 10%.

Auf diese Weise können wir ein Bild in HTML mit CSS zuschneiden.

Beispielcode:

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}