Enfant avec hauteur max: 100% parent déborde

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éborde 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%; 
}

Ceci est corrigé, cependant, si le parent reçoit une hauteur explicite:

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

.container {  
    height: 200px;
}

Est-ce que quelqu'un sait pourquoi l'enfant n'honorerait pas la hauteur maximale de son parent dans le premier exemple? Pourquoi une hauteur explicite est-elle requise?

Lorsque vous spécifiez un pourcentage pour max-heightun enfant, il s'agit d'un pourcentage de la taille réelle du parent, et non de celle du parent max-height, assez curieusement . La même chose s'applique à max-width.

Ainsi, lorsque vous ne spécifiez pas de hauteur explicite sur le parent, il n'y a pas de hauteur de base à partir de laquelle l'enfant max-heightdoit être calculé, donc max-heightcalcule à none, permettant à l'enfant d'être aussi grand que possible. La seule autre contrainte agissant sur l'enfant maintenant est celle max-widthde 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 hauteur / largeur tout en étant globalement aussi grand que possible.

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

.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>

J'ai joué un peu. 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;
}

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

L'astuce est possible car il existe une relation entre WIDTH et PADDING-BOTTOM d'un élément. Alors:

parent:

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

enfant ( supprimez tous les css liés à la largeur , c'est-à-dire largeur: 100%):

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

Vous pouvez utiliser la propriété object-fit

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

Comme suggéré ici

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

Et un encore meilleur dans CSS-Tricks

Il est pris en charge dans

• Chrome 31+
• Safari 7.1+
• Firefox 36+
• Opera 26+
• Android 4.4.4 ou version ultérieure
• iOS 8+

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

Il n'est actuellement pas pris en charge sur IE, mais ... qui s'en soucie ? En outre, iOS prend en charge l'ajustement d'objet, mais pas la position d'objet, mais ce sera bientôt le cas.

Voici une solution pour une question récemment ouverte marquée comme un double de cette question. La <img>balise dépassait la hauteur maximale du parent <div>.

Cassé: violon

Travail: violon

Dans ce cas, ajouter display:flexaux 2 <div>balises parents était la réponse

Au lieu d'aller avec max-height: 100% / 100%, une approche alternative consistant à remplir tout l'espace serait d'utiliser position: absoluteavec haut / bas / gauche / droite réglé sur 0.

En d'autres termes, le HTML ressemblerait à ceci:

<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 {
}

Vous pouvez voir un exemple en direct sur Codesandbox - Overflow dans CSS Flex / Grid

Peut-être que quelqu'un d'autre peut expliquer les raisons de votre problème, mais vous pouvez le résoudre en spécifiant la hauteur du conteneur, puis en définissant la hauteur de l'image sur 100%. Il est important que le widthde l'image apparaisse avant le height.

<html>
    <head>
        <style>
            .container {  
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            }

            .container img {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>

Le plus proche que je puisse obtenir est cet exemple:

http://jsfiddle.net/YRFJQ/1/

ou

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

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

Le problème principal est que la hauteur prend le pourcentage de la hauteur du conteneur, il recherche donc une hauteur explicitement définie dans le conteneur parent, et non sa hauteur maximale.

Le seul moyen de contourner cela dans une certaine mesure est le violon ci-dessus où vous pouvez masquer le débordement, mais le rembourrage agit toujours comme un espace visible dans lequel l'image coulera, et le remplacement par une bordure solide fonctionne à la place (et ensuite ajouter une zone de bordure pour en faire 200px si c'est la largeur dont vous avez besoin)

Je ne sais pas si cela correspondrait à ce pour quoi vous en avez besoin, mais le mieux que je puisse sembler arriver.

Une bonne solution est de ne pas utiliser la hauteur sur le parent et de l'utiliser uniquement sur l'enfant avec View Port :

Exemple de violon: https://jsfiddle.net/voan3v13/1/

body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

.child {
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;
}

Les conteneurs emballent déjà bien leur contenu. Cela ne fonctionne souvent pas aussi bien dans l'autre sens: les enfants ne remplissent pas bien leurs ancêtres. Donc, définissez vos valeurs de largeur / hauteur sur l'élément le plus à l'intérieur plutôt que sur l'élément le plus à l'extérieur, et laissez les éléments extérieurs envelopper leur contenu.

.container {
    background: blue;
    padding: 10px;
}

img {
    display: block;
    max-height: 200px;
    max-width: 200px;
}

Votre conteneur n'a pas de hauteur.

Ajouter une hauteur: 200px;

aux conteneurs css et le minou restera à l'intérieur.