Aligner verticalement une image à l'intérieur d'un div avec une hauteur réactive

Question

J'ai le code suivant qui configure un conteneur dont la hauteur change avec la largeur lorsque le navigateur est redimensionné (pour maintenir un rapport d'aspect carré).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Comment aligner verticalement l'IMG à l'intérieur du conteneur ? Toutes mes images ont des hauteurs variables et le conteneur ne peut pas avoir une hauteur/une hauteur de ligne fixe parce qu'il est réactif... Aidez-moi !

Answer 1

Essayez

Html

<div class="responsive-container">
     <div class="img-container">
         <IMG HERE>
     </div>
</div>

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}