Bambino con altezza massima: 100% trabocca genitore

Sto cercando di capire cosa mi sembra un comportamento inaspettato:

Ho un elemento con un'altezza massima del 100% all'interno di un contenitore che utilizza anche un'altezza massima ma, inaspettatamente, il bambino trabocca il genitore:

Caso di prova: 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%; 
}

Ciò è risolto, tuttavia, se al genitore viene assegnata un'altezza esplicita:

Caso di prova: http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Qualcuno sa perché il bambino non onorerebbe l'altezza massima del suo genitore nel primo esempio? Perché è richiesta un'altezza esplicita?

Quando specifichi una percentuale per max-heightsu un bambino, è una percentuale dell'altezza effettiva del genitore, non di quella del genitore max-height, stranamente . Lo stesso vale per max-width.

Quindi, quando non specifichi un'altezza esplicita sul genitore, non esiste un'altezza di base per il max-heightcalcolo del bambino , quindi max-heightcalcola a none, permettendo al bambino di essere il più alto possibile. L'unico altro vincolo che agisce sul bambino ora è quello max-widthdel suo genitore, e poiché l'immagine stessa è più alta di quanto sia larga, trabocca l'altezza del contenitore verso il basso, al fine di mantenere le proporzioni pur rimanendo il più grande possibile nel complesso.

Quando si esegue specificare un altezza esplicita per il genitore, allora il bambino sa che deve essere al massimo 100% di tale altezza esplicito. Ciò consente di essere vincolato all'altezza del genitore (pur mantenendo le proporzioni).

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

Ho giocato un po '. Su un'immagine più grande in Firefox, ho ottenuto un buon risultato con l'utilizzo del valore della proprietà eredita. Questo ti aiuterà?

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

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

Ho trovato una soluzione qui: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Il trucco è possibile perché esiste una relazione tra WIDTH e PADDING-BOTTOM di un elemento. Così:

genitore:

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

figlio ( rimuovi tutti i CSS relativi alla larghezza , cioè larghezza: 100%):

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

È possibile utilizzare la proprietà adatta all'oggetto

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

Come suggerito qui

Una spiegazione completa di questa proprietà di Chris Mills in Dev.Opera

E ancora meglio in Trucchi CSS

È supportato in

• Chrome 31+
• Safari 7.1+
• Firefox 36+
• Opera 26+
• Android 4.4.4+
• iOS 8+

Ho appena verificato che anche vivaldi e cromo lo supportino (nessuna sorpresa qui)

Al momento non è supportato su IE, ma ... a chi importa ? Inoltre, iOS supporta l'adattamento degli oggetti, ma non la posizione dell'oggetto, ma lo farà presto.

Ecco una soluzione per una domanda aperta di recente contrassegnata come duplicata di questa domanda. Il <img>tag stava superando l'altezza massima del genitore <div>.

Rotto: violino

Lavorare: violino

In questo caso, l'aggiunta display:flexai 2 <div>tag principali è stata la risposta

Invece di andare con l'altezza massima: 100% / 100%, un approccio alternativo per riempire tutto lo spazio sarebbe usare position: absolutecon top / bottom / left / right impostato su 0.

In altre parole, l'HTML sarebbe simile al seguente:

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

Puoi vedere un esempio dal vivo su Codesandbox - Overflow in CSS Flex / Grid

Forse qualcun altro può spiegare i motivi alla base del tuo problema, ma puoi risolverlo specificando l'altezza del contenitore e quindi impostando l'altezza dell'immagine su 100%. È importante che widthl'immagine venga visualizzata prima di 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>

Il più vicino che posso arrivare a questo è questo esempio:

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

o

.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%; 
}

Il problema principale è che l'altezza prende la percentuale dell'altezza del contenitore, quindi cerca un'altezza esplicitamente impostata nel contenitore padre, non la sua altezza massima.

L'unico modo per ovviare a questo in qualche modo che posso vedere è il violino sopra dove puoi nascondere l'overflow, ma poi il riempimento funge ancora da spazio visibile per far fluire l'immagine, quindi funziona invece la sostituzione con un bordo solido (e quindi aggiungendo border-box per renderlo 200px se questa è la larghezza di cui hai bisogno)

Non sono sicuro se questo si adatterebbe a ciò di cui hai bisogno, ma il meglio che riesco a capire.

Una buona soluzione è non usare l'altezza sul genitore e usarla solo sul figlio con Visualizza porta :

Esempio di violino: 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;
}

I contenitori generalmente già avvolgono bene il loro contenuto. Spesso non funziona anche al contrario: i bambini non riempiono bene i loro antenati. Quindi, imposta i valori di larghezza / altezza sull'elemento più interno anziché sull'elemento più esterno e lascia che gli elementi esterni avvolgano il loro contenuto.

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

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

Il tuo contenitore non ha un'altezza.

Aggiungi altezza: 200 px;

ai contenitori css e il gattino rimarrà all'interno.