web-dev-qa-db-fra.com

Centre vertical sensible avec débordement masqué

Après avoir recherché à la fois Stack Overflow et Google, je me demande encore comment centrer verticalement une image plus grande que son élément parent. Je n'utilise pas de hauteur, mais de hauteur maximale, car je veux créer une solution réactive, sans jQuery. Si possible.

Voici du code:

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

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

<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

48
Alexandru Diacov

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

La mauvaise nouvelle est qu'il nécessite un élément wrapper supplémentaire.

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

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>
0
Aiglegate

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

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