CSS-Eigenschaft object-fit
15/04/2026
Die CSS-Eigenschaft object-fit wird verwendet, um Bilder in einen bestimmten Bereich einzupassen.
Beispielsweise füllt das Bild im untenstehenden Rahmen, der 350px breit und 200px hoch ist, nicht den gesamten Rahmen aus. Es ist möglich, den verbleibenden Platz im Rahmen mithilfe der Eigenschaft object-fit zu füllen.
Object-fit Funktionen
Die Eigenschaften object-fit: cover, object-fit: contain und object-fit: fill ermöglichen es Ihnen, ein Bild nach Wunsch in einen bestimmten Bereich einzupassen.
| Funktion | Beschreibung |
|---|---|
| cover | Füllt den gesamten begrenzten Raum aus, wobei das Bild an den Rändern beschnitten wird, um den Bereich zu füllen. |
| contain | Das Bild wird in den begrenzten Raum eingepasst, wobei sein Seitenverhältnis beibehalten wird. |
| fill | Füllt den gesamten begrenzten Raum aus; das Breiten- und Höhenverhältnis wird nicht beibehalten, was zu einer verzerrten Darstellung führen kann. |
| none | Die Größe des Bildes wird nicht verändert; es wird ein Ausschnitt in den ursprünglichen Abmessungen angezeigt. |
| scale-down | Wählt die kleinste Größe zwischen “contain“ und “none“ aus. |
Die Eigenschaft object-fit muss zusammen mit den Eigenschaften width: 100% und height: 100% verwendet werden.
object-fit: cover
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: contain
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: fill
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:fill;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: none
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:none;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: scale-down
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:scale-down;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>
Advertisement
Continue Reading Below