Objekt-Fit: Deckung und Objektposition: 50% 50% zentrieren das Bild in der Mitte des Containers nicht
Posted: 03 Jun 2025, 17:50
Ich habe einen Container und ein Bild darin wie folgt: < /p>
.container {
height: auto;
width: 100vw;
position: relative;
overflow: hidden;
}
img {
width: 100%;
min-width: 500px;
object-fit: cover;
object-position: 50% 50%;
}< /code>
< /code>
< /div>
< /div>
< /p>
Das Bild kann je nach Größe des Bildschirms größer oder kleiner sein als die Abmessungen des Behälters. Ich möchte das Bild im Container unter Verwendung von Objektanpassungen und Objektpositionen zentrieren: 50% 50%; Damit in größeren Bildschirmgrößen immer der Behälter und wenn der Behälter kleiner ist, positioniert er sich in der Mitte des Behälters. Keine Wirkung auf die Eigenschaft.
.container {
height: auto;
width: 100vw;
position: relative;
overflow: hidden;
}
img {
width: 100%;
min-width: 500px;
object-fit: cover;
object-position: 50% 50%;
}< /code>
< /code>
< /div>
< /div>
< /p>
Das Bild kann je nach Größe des Bildschirms größer oder kleiner sein als die Abmessungen des Behälters. Ich möchte das Bild im Container unter Verwendung von Objektanpassungen und Objektpositionen zentrieren: 50% 50%; Damit in größeren Bildschirmgrößen immer der Behälter und wenn der Behälter kleiner ist, positioniert er sich in der Mitte des Behälters. Keine Wirkung auf die Eigenschaft.