Comment puis-je aligner verticalement une image dans un conteneur réactif ?

Alignement vertical d'une image dans un conteneur réactif

Le défi

Vous disposez d'une structure HTML avec un conteneur qui maintient un rapport hauteur/largeur carré comme la fenêtre du navigateur est redimensionnée. À l’intérieur de ce conteneur, vous souhaitez ajouter une image, mais vous devez vous assurer qu’elle reste alignée verticalement. Le défi se pose car les images sont variables en hauteur et la hauteur du conteneur ne peut pas être fixée.

Solution

Utilisation d'éléments CSS en ligne

1. Créez un pseudo-élément de bloc en ligne en tant que premier (ou dernier) enfant de l'élément conteneur et définissez sa hauteur sur 100 % pour occuper la totalité de l'élément. hauteur du conteneur.
2. Définissez vertical-align: middle à la fois sur le pseudo-élément et sur l'image pour centrer verticalement les éléments.
3. Supprimez tout espace blanc entre les éléments en définissant font-size : 0 ; sur l'élément conteneur pour supprimer l'espace occupé par les caractères (espaces).

HTML:

<div class="container">
    <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <h3 id="Création-du-conteneur-Responsive">Création du conteneur Responsive</h3><p>Pour créer un conteneur réactif où la hauteur est redimensionnée par rapport à la largeur, vous pouvez utiliser des valeurs en pourcentage pour le remplissage supérieur/inférieur property :</p><pre class="brush:php;toolbar:false">.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Envelopper le contenu de l'image

Pour éviter un espace excessif en haut ou en bas du conteneur, enveloppez l'image dans un élément wrapper et positionnez-la absolument dans le conteneur à remplir tout son espace :

.responsive-container {
  width: 60%;
  position: relative;
}

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

Y compris l'image et le CSS pour Alignement

HTML :

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
  </div>
</div>

CSS pour l'alignement des images :

.img-container {
  text-align: center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Alternative pour la compatibilité des navigateurs

Pour une meilleure compatibilité entre les navigateurs, vous pouvez utilisez un élément div comme premier enfant du conteneur d'image au lieu du pseudo-élément :

HTML :

<div class="img-container">
    <div class="centerer"></div>
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
</div>

CSS :

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

Utilisation des propriétés max-* pour le contrôle de l'image

Pour conserver l'image dans le conteneur lorsque la largeur est plus petite, vous pouvez utiliser les propriétés max-height et max-width sur l'image :

.img-container img {
    max-height: 100%;  /* Set maximum height to 100% of its parent */
    max-width: 100%;   /* Set maximum width to 100% of its parent */
}