it-swarm.com.de

Responsive vertikale Mitte mit verstecktem Überlauf

Nach der Suche nach Stack Overflow und Google frage ich mich immer noch, wie ein Bild vertikal zentriert werden kann, das größer ist als das übergeordnete Element. Ich verwende keine Höhe, nur Max-Höhe, weil ich ohne jQuery eine responsive Lösung erstellen möchte. Wenn möglich.

Hier ist ein Code:

<div style="max-height: 425px; overflow: hidden;">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>
15

um ein größeres Bild vertikal zu zentrieren, können Sie die Konstruktion und den folgenden Befehl verwenden

<div class="img-wrapper">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

Und css:

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

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

GEIGE

48

Ich habe einen Weg gefunden, damit es nur mit einem max-height (im Gegensatz zu einer festen Höhe) funktioniert, der im Container festgelegt ist.

Die schlechte Nachricht ist, dass ein zusätzliches Wrapper-Element erforderlich ist.

HTML:

<div class="img-wrapper">
    <div class="img-container">
        <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
    </div>
</div>

CSS:

.img-wrapper {
    overflow: hidden;
    max-height: 425px;
}

.img-container {
    max-height: inherit;
    transform: translateY(50%);
}

.img-wrapper img {
    display: block;
    transform: translateY(-50%);
}
4
Thomas Bachem

Versuchen 

<html>
<head>
</head>
<body >

    <div style="max-height: 425px;border:1px solid;max-width:500px;overflow:hidden">
        <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" style='position: relative;top: -231px;left: -500px;'>
    </div>
</body>
</html>
0
Aiglegate

Wenn Sie keine img-Tags ( fiddle ) verwenden müssen:

CSS

.imageContainer {
    margin: 0; 
    height: 200px; /* change it to your value*/
    width: 200px; /* or use fixed width*/
    background: transparent url('') no-repeat center;
    overflow: hidden; 
}

HTML

<div class="imageContainer" style="background-image: url('http://deepwish.com/site/wp-content/uploads/2013/10/butterfly2_large.jpg');"></div>
0
SW4