L'enfant dont la hauteur maximale est de 100% déborde le parent.

Question

L'enfant dont la hauteur maximale est de 100% déborde le parent.

Demandé el 10 de Janvier, 2013: Quand la question a-t-elle été
201160 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de comprendre ce qui me semble être un comportement inattendu :

J'ai un élément avec une hauteur maximale de 100% à l'intérieur d'un conteneur qui utilise également une hauteur maximale mais, de manière inattendue, l'enfant dépasse le parent :

Cas de test : http://jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

Ce problème est toutefois résolu si l'on donne une hauteur explicite au parent :

Cas de test : http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Quelqu'un sait-il pourquoi l'enfant ne respecte pas la hauteur maximale de son parent dans le premier exemple ? Pourquoi une hauteur explicite est-elle nécessaire ?

Demandé el 10 de Janvier, 2013 par iamkeir

1 votes

Les navigateurs ont-ils modifié leur comportement par défaut à cet égard ? Parce que sur ma version actuelle de Google Chrome, les deux manipulations ci-dessus ne montrent pas le débordement de l'enfant pour moi. Les nouveaux navigateurs utilisent-ils par défaut le format box-sizing : border-box ou quelque chose comme ça ?

Commenté el 20 de Janvier, 2021 par David Mays

Answer 1

5 Réponses

Answer 2

349voto

BoltClock Points 249668

Lorsque vous spécifiez un pourcentage pour max-height sur un enfant, il s'agit d'un pourcentage de la taille réelle du parent, et non de la taille du parent. max-height , curieusement . Il en va de même pour max-width .

Ainsi, lorsque vous ne spécifiez pas de hauteur explicite pour le parent, il n'y a pas de hauteur de base pour les images de l'enfant. max-height à partir de laquelle elle est calculée, de sorte que max-height se calcule en none L'enfant doit être aussi grand que possible. La seule autre contrainte qui s'exerce sur l'enfant est la max-width de son parent, et comme l'image elle-même est plus haute que large, elle déborde la hauteur du conteneur vers le bas, afin de maintenir son rapport d'aspect tout en étant aussi grande que possible dans l'ensemble.

Lorsque vous faire spécifie une hauteur explicite pour le parent, alors l'enfant sait qu'il doit être au maximum à 100% de cette hauteur explicite. Cela lui permet d'être contraint à la hauteur du parent (tout en conservant son rapport hauteur/largeur).

Répondu el 10 de Janvier, 2013 par BoltClock (249668 Points )

Answer 3

109voto

Daniel Points 1456

.container {
  background: blue;
  padding: 10px;
  max-height: 200px;
  max-width: 200px;
  float: left;
  margin-right: 20px;
}

.img1 {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.img2 {
  display: block;
  max-height: inherit;
  max-width: inherit;
}

<!-- example 1  -->
<div class="container">
  <img class='img1' src="http://via.placeholder.com/350x450" />
</div>

<!-- example 2  -->

<div class="container">
  <img class='img2' src="http://via.placeholder.com/350x450" />
</div>

Je me suis un peu amusé. Sur une image plus grande dans firefox, j'ai obtenu un bon résultat en utilisant la valeur de la propriété inherit. Cela vous aidera-t-il ?

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

Répondu el 10 de Janvier, 2013 par Daniel (1456 Points )

Answer 4

24voto

Tianzhen Lin Points 1436

Au lieu d'utiliser la hauteur maximale : 100%/100%, une autre approche pour remplir tout l'espace serait d'utiliser position: absolute avec haut/bas/gauche/droite à 0.

En d'autres termes, le code HTML ressemblerait à ce qui suit :

<div class="flex-content">
  <div class="scrollable-content-wrapper">
    <div class="scrollable-content">
      1, 2, 3
    </div>
   </div>
</div>

.flex-content {
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.scrollable-content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.scrollable-content {
    /* Add styling here */
}

Essayez-le ci-dessous :

.flex-content {
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
.scrollable-content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}
html {
  height: 50%;
  width: 50%;
}
body {
  height: 100%;
  width: 100%;
}
.parent {
  height: 100%;
  outline: 1px solid red;
}

<html>
<body>
  <div class="parent">
    <div class="flex-content">
      <div class="scrollable-content-wrapper">
        <div class="scrollable-content" id="scrollable">
          1, 2, 3
        </div>
      </div>
    </div>
  </div>

  <button onClick="scrollable.innerText += '\nSome more text'" style="margin-top: 1rem;">Add Line</button>
  <p>
    The red outline represents the parent. Click above to add a line until overflow occurs to see that the size of the parent is not increased.
  </p>
</body>
</html>

Répondu el 9 de Octobre, 2019 par Tianzhen Lin (1436 Points )

Answer 5

8voto

Niente1 Points 89

J'ai trouvé une solution ici : http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

L'astuce est possible parce qu'il existe une relation entre la LARGEUR et le PADDING-BOTTOM d'un élément. Ainsi :

parent :

container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }

enfant ( supprimer tous les codes relatifs à la largeur c'est-à-dire width:100%) :

img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

Répondu el 21 de Novembre, 2014 par Niente1 (89 Points )

Answer 6

5voto

Suil Gantisao Lieira Points 1

Vous pouvez utiliser la propriété Ajustement de l'objet

.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

Comme suggéré aquí

Une explication complète de cette propriété par Chris Mills dans Dev.Opera

Et un autre encore meilleur dans CSS-Tricks

Il est pris en charge dans

Chrome 31+
Safari 7.1+
Firefox 36+
Opéra 26+
Android 4.4.4+
iOS 8+

Je viens de vérifier que vivaldi et chromium le supportent également (pas de surprise ici).

Il n'est actuellement pas pris en charge par IE, mais... qui s'en soucie ? De plus, iOS supporte l'ajustement d'objet, mais pas la position d'objet, mais cela ne saurait tarder.

Répondu el 6 de Juillet, 2015 par Suil Gantisao Lieira (1 Points )

L'enfant dont la hauteur maximale est de 100% déborde le parent.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

L'enfant dont la hauteur maximale est de 100% déborde le parent.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: