Centre vertical réactif avec débordement caché

Après une recherche à la fois d'un Débordement de Pile et Google, je me demande encore comment le centre vertical d'une image qui est plus grande que celle du parent de l'élément. Je n'utilise pas de hauteur, juste max-hauteur, parce que je veux être une solution réactive, sans jQuery. Si cela est possible.

Voici un code:

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

source d'informationauteur Henrik Albrechtsson | 2013-11-22

  1. 46

    centrer verticalement une image plus grande u peut utiliser la construction et css soufflet

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

    Et css:

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

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

    VIOLON

  2. 4

    J'ai trouvé un moyen de le faire fonctionner avec seulement un max-height (par opposition à une hauteur fixe) fixé sur le conteneur.

    La mauvaise nouvelle, c'est qu'il requiert un autre élément wrapper.

    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%);
}
  3. 0

    Essayer 

    <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>
  4. 0

    Si vous n'avez pas besoin d'utiliser img balises (violon):

    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>
  5. -1

    si vous voulez faire une image réactive, essayez d'utiliser
    <div style="">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%">
    </div>