malnefrage.de
malnefrage.de
Forum Frage stellen! Neue Fragen Neue Antworten Login
Frage
Frage
von annanass am 06.03.2018, 19.40 Uhr

CSS - vertical center image in div mit overflow hidden?

Wie kann ich mit CSS ein Bild in einem div Container mit fester vorgegebener Höhe vertikal zentriert platzieren und den Überstand des Image ausblenden? Ich möchte quasi ein größeres Foto in einem 100% breiten div mit der Höhe von 370 px mittig ausrichten. Oben und unten sollte das Bild abgeschnitten werden wenn es höher als 370 px ist.

Ich habe bereits versucht das Image mit
object-fit: cover;
anzupassen, aber das funktioniert im Internet Explorer und Microsoft Edge nicht.

Wer hat eine Lösung?

Antwort
Antwort
von HTMLbuddy am 06.03.2018, 19.50 Uhr
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;
}

mehr Fragen ...

Die auf malnefrage.de veröffentlichten Fragen und Antworten sind Meinungsäußerungen der jeweiligen User. Da die Aussagen nicht geprüft werden, kann die Richtigkeit der Inhalte nicht gewährleistet werden.
Ratgeber-Community für Fragen & Antworten:
Forum mit Tipps, Hilfe und Ratschläge
Facebook
Twitter
Google
E-Mail
Bookmark
weitere