nicht angemeldet
Hallo zusammen!
Ich habe folgende Situation: Ein div-Element ist 800px breit und 200px hoch. In diesem div ist ein Bild mit dem <img> eingebunden. Mein Ziel ist es, das Bild vertikal zu zentrieren und das, was übersteht, abzuschneiden. Dabei soll oben und unten jeweils gleichviel abgeschnitten werden. Mein Code bisher:
.box {
width: 800px; height: 200px;overflow: hidden;
}
.box img {
width: 800px;
height: auto;
vertical-align: middle;
}
<div class="box"><img src="bild.jpg"></div>
Das Ergebnis bisher: Das Bild wird in der richtigen Breite eingefügt und das was über das div hinausgeht wird abgeschnitten. ABER: es ist vertikal nicht zentriert, sondern oben bündig.
Ich habe es weiterhin schon mit margin: auto; probiert, allerdings erfolglos.
Hat jemand eine Idee, was ich noch probieren könnte?