malnefrage.de
malnefrage.de
Menü
Facebook
Twitter
E-Mail
Bookmark
weitere
Ratgeber-Community für Fragen & Antworten:
Forum mit Tipps, Hilfe und Ratschläge
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;
}

Ähnliche Fragen
Ich beziehe vom Kommunalen Center für Arbeit noch bis zum 31.03.2021 Leistungen (ALG 2) und danach nicht mehr. Es gibt auch keinen neuen Antrag, ...
Bitte nur ernste Antworten weil ich kein Plan hab ob es grün-blau, grün-grau, doch eher grau-blau oder was auch immer is xd
Ich habe eine Frage und zwar möchte ich gerne etwas im Bereich Architektur in Kombination mit Raumplanung (Freiraum- und Landschaftsarchitektur) machen. ...
Ich würde gerne den Namen des Models wissen, welches im Bader Onlinekatalog das ¾-Nachthemd mit der Bestellnummer 096962J trägt. Sie war auch schon in ...
Ich bin nächstes Jahr mit dem Abi fertig und hab mich um eine Ausbildung als Sozialversicherungsfachangestellte beworben. Aber nach dem schriftlichen ...
Nächste Frage

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.