CSS - vertical center image in div mit overflow hidden?

Um ein größeres Image vertical zu zentrieren kannst du das Bild in ein div packen den overflow auf hidden setzen und anschließen das Bild mittig im div positionieren. Versuch mal folgende Konstruktion:

HTML:

<div class="img-wrapper">
    <img src="/images/foto.jpg">
</div>

CSS:

.img-wrapper{
    position: relative;
    overflow: hidden;
    height: 370px;
}

.img-wrapper img{
    position: absolute;
    top: -100%; 
    left: 0; 
    right: 0; 
    bottom: -100%;
    margin: auto;
}

Hi!

Wenn du den object-fit: cover; Trick nicht verwenden kannst weil es im IE und älteren Edge-Versionen Probleme macht, gibt es einen anderen Ansatz der durch CSS-Positionierung funktioniert und ebenfalls das gewünschte Ergebnis liefert.

Hier ein Beispiel:

css
.container {
  width: 100%;
  height: 370px;
  overflow: hidden;
  position: relative;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: auto;
}

Das div-Element (.container) bekommt eine feste Höhe von 370px und overflow: hidden, damit das Bild nur innerhalb des Containers sichtbar bleibt.
Das Bild wird durch position: absolute; innerhalb des Containers ausgerichtet. Mit top: 50% und left: 50% wird es zunächst zur Mitte des Containers geschoben.
3. Mit transform: translate(-50%, -50%); wird es dann genau in die Mitte ausgerichtet.
4. min-width: 100% sorgt dafür, dass das Bild immer die volle Breite des Containers ausfüllt und height: auto; passt die Höhe proportional an.

Diese Methode funktioniert auch in älteren IE-Versionen und Edge.
Teste mal aus und schau ob das Ergebnis für dich passt!