web-dev-qa-db-fra.com

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

J'ai le code suivant qui configure un conteneur qui a une hauteur qui change avec la largeur lorsque le navigateur est redimensionné (pour conserver un rapport de format 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 puis-je 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/hauteur de trait fixe car il est réactif ... S'il vous plaît, aidez-moi!

htmlcssresponsive-designvertical-alignment
130
user1794295

Voici une technique pour aligner des éléments en ligne dans un parent, horizontalement et verticalement à la fois:

Alignement vertical

1) Dans cette approche, nous créons un élément _inline-block_ (pseudo-) comme premier (ou dernier) enfant de l'élément parent, et définissez sa propriété height sur _100%_ pour prendre toute la hauteur de son parent.

2) De plus, l'ajout de _vertical-align: middle_ conserve les éléments en-ligne (-block) au centre de l'espace. Donc, nous ajoutons cette déclaration CSS aux premier-enfant ​​et notre élément ​​(le image) les deux.

3) Enfin, afin de supprimer le caractère d'espace blanc entre les éléments inline (-block), nous pourrions définir la police taille du parent ​​à zéro par _font-size: 0;_.

Remarque: J'ai utilisé la technique de Nicolas Gallagher technique de remplacement d'image dans la suite.

Quels sont les bénéfices?

  • Le conteneur (parent) peut avoir des dimensions dynamiques.

  • Il n'est pas nécessaire de spécifier explicitement les dimensions de l'élément image.

  • Nous pouvons facilement utiliser cette approche pour aligner un élément _<div>_ verticalement également; qui peuvent avoir un contenu dynamique (hauteur et/ou largeur). Notez cependant que vous devez redéfinir la propriété _font-size_ de la variable div pour afficher le texte interne. Démo en ligne.

_<div class="container">
    <div id="element"> ... </div>
</div>
_
_.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;        /* <-- reset the font property */
}
_

Le résultat

Vertically align an element in its container

Conteneur réactif

Cette section ne répondra pas à la question car le PO sait déjà comment créer un conteneur réactif. Cependant, je vais expliquer comment cela fonctionne.

Afin de modifier la hauteur d'un élément conteneur avec son largeur (en respectant les proportions), nous pourrions utiliser une valeur en pourcentage pour top/bottom padding propriété.

A valeur en pourcentage sur le remplissage/les marges supérieur/inférieur est relatif à la largeur du bloc conteneur.

Par exemple:

_.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   */
}
_

Voici le démo en ligne. Mettez en commentaire les lignes du bas et redimensionnez le panneau pour voir l'effet.

Nous pourrions également appliquer la propriété padding à un pseudo-élément dummy enfant ou _:before_/_:after_ pour obtenir le même résultat. Mais notez que, dans ce cas, la valeur en pourcentage sur padding est relative à la largeur de la _.responsive-container_ lui-même.

_<div class="responsive-container">
  <div class="dummy"></div>
</div>
_
_.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}
_

Démo n ° 1.
Démonstration n ° 2(Utilisation du pseudo-élément _:after_) = =

Ajout du contenu

Utilisation de la propriété _padding-top_ provoque un espace énorme en haut ou en bas du contenu, à l'intérieur du conteneur.

Afin de résoudre ce problème, nous devons envelopper le contenu dans un élément wrapper, le supprimer du flux normal du document en utilisant positionnement absol , et enfin développer le wrapper (bu en utilisant top, right, bottom et left propriétés) pour remplir tout l'espace de son parent, le conteneur.

Et c'est parti:

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

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

Voici le démo en ligne.

Se rassembler

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

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>
_
_.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;
}
_

Voici le WORMO DEMO.

Évidemment, vous pouvez éviter d'utiliser le pseudo-élément _::before_ pour la compatibilité du navigateur et créer un élément en tant que premier enfant du _.img-container_:

_<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>
_
_.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
_

MISE À JOUR DEMO.

Utilisation de propriétés _max-*_

Afin de conserver l'image à l'intérieur de la boîte en largeur inférieure, vous pouvez définir les propriétés _max-height_ et _max-width_ sur l'image:

_.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}
_

Voici le DEMO MISE À JOUR.

380
Hashem Qolami

Avec flexbox c'est simple:

VIOLON

Ajoutez simplement ce qui suit au conteneur d’images:

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}
46
Danield

Utilisez ce css, car vous avez déjà le balisage correspondant:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

Voici un JsBin de travail: http://jsbin.com/ihilUnI/1/edit

Cette solution ne fonctionne que pour les images carrées (car un pourcentage de marge supérieur dépend de la largeur du conteneur, pas de la hauteur). Pour les images de taille aléatoire, vous pouvez effectuer les opérations suivantes:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

Solution JsBin opérationnelle: http://jsbin.com/ihilUnI/2/edit

16
Tibos

Vous pouvez centrer une image horizontalement et verticalement à l'aide de margin: auto et du positionnement absolu. Aussi:

  1. Il est possible de supprimer un balisage supplémentaire en utilisant des pseudo-éléments.
  2. Il est possible d'afficher la partie centrale des GRANDES images en utilisant des valeurs négatives à gauche, en haut, à droite et en bas.
.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}
<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>
11
Salman A

Essaye celui-là

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }
4
user2678106

Voici une technique qui vous permet de centrer TOUT contenu à la fois verticalement et horizontalement!

Fondamentalement, vous avez juste besoin de deux conteneurs et assurez-vous que vos éléments répondent aux critères suivants.

Le conteneur extérieur:

  • devrait avoir display: table;

Le conteneur intérieur:

  • devrait avoir display: table-cell;
  • devrait avoir vertical-align: middle;
  • devrait avoir text-align: center;

La zone de contenu:

  • devrait avoir display: inline-block;

Si vous utilisez cette technique, ajoutez simplement votre image (ainsi que tout autre contenu de votre choix) dans la zone de contenu.

Démo: 

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

Voir aussi ce violon !

2
John Slegers

Je suis tombé sur ce fil à la recherche d'une solution qui:

  • utilise 100% de la largeur de l'image donnée
  • conserve le format d'image
  • maintient l'image verticalement alignée au milieu
  • fonctionne dans les navigateurs qui ne supportent pas complètement flex

Tester certaines des solutions publiées ci-dessus. Je n’en ai pas trouvé une qui réponde à tous ces critères. J’ai donc concocté cette solution simple qui pourrait être utile pour: d'autres personnes ayant besoin de faire la même chose:

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it's horizontally center) */
  width: 100%;
}
<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

Exemple de travail sur JSFiddle

2
Alexandra

code HTML

<div class="image-container"> <img src=""/> </div>

code css

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }
0
William

Essayer

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%;
}
0
Paramasivan

Faites une autre div et ajoutez les deux 'dummy' et 'img-container' dans la div

Est-ce que HTML et CSS comme suit

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}
<div class="responsive-container">
    <div class="inner-container">
                <div class="dummy">Sample</div>
                <div class="img-container">
                        Image tag
                </div>
        </div>    
</div>

Au lieu de 100% pour le 'responsive-container', vous pouvez donner la hauteur souhaitée.,

0
Discover