Дитина з максимальним зростом: 100% переповнює батька

Я намагаюся зрозуміти, що мені здається несподіваною:

У мене є елемент з максимальною висотою 100% всередині контейнера, який також використовує максимальну висоту, але, несподівано, дитина переповнює батьків:

Тестовий випадок: 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%; 
}

Однак це фіксується, якщо батькові надається явна висота:

Тестовий випадок: http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Хтось знає, чому дитина не вшановує максимальний зріст свого батька в першому прикладі? Чому потрібна явна висота?

Коли ви вказуєте відсоток max-heightна дитину, це max-height, як не дивно, відсоток від фактичного зросту батьків, а не батьківського . Це ж стосується і max-width.

Отже, якщо ви не вказуєте чітку висоту для батьків, то для дитини не max-heightможе бути обчислена базова висота , тому max-heightобчислюється none, що дозволяє дитині бути якомога вище. Єдине інше обмеження, яке діє на дитину зараз, - це max-widthйого батько, і оскільки саме зображення вище, ніж широке, воно переповнює висоту контейнера вниз, щоб зберегти його співвідношення сторін, залишаючись максимально великим в цілому.

Коли ви робите явно вказати висоту батька, то дитина знає , що він повинен бути не більше 100% від цієї явної висоти. Це дозволяє обмежувати зріст батька (зберігаючи співвідношення сторін).

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

Я трохи погрався. Що стосується більшого зображення у firefox, я отримав хороший результат із використанням значення властивості успадкувати. Чи допоможе це вам?

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

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

Тут я знайшов рішення: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Трюк можливий тому, що існує співвідношення між ШІРНЕЮ і ПАДАЧОМ-БОТОМ елемента. Так:

батьків:

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

дочірня ( видаліть всі css, пов'язані з шириною , тобто шириною: 100%):

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

Ви можете використовувати властивість object-fit

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

Як і пропонується тут

Кріс Міллс у Dev.Opera повне пояснення цього майна

І ще краще в CSS-Tricks

Він підтримується в

• Chrome 31+
• Сафарі 7.1+
• Firefox 36+
• Opera 26+
• Android 4.4.4+
• iOS 8+

Я просто перевірив, що також підтримують вівальді та хром (тут не дивно)

Наразі це не підтримується в IE, але ... кого це хвилює ? Також iOS підтримує об'єкт-розміщення, але не об'єкт-позицію, але це незабаром.

Ось рішення нещодавно відкритого питання, позначеного як дублікат цього питання. <img>Тег перевищуючи максимальну висоту-батька <div>.

Зламана: Fiddle

Робота: Fiddle

У цьому випадку відповідь було додано display:flexдо двох батьківських <div>тегів

Замість досягнення максимальної висоти: 100% / 100%, альтернативним підходом заповнення всього простору було б використання position: absoluteверхнього / нижнього / лівого / правого значення на 0.

Іншими словами, HTML виглядатиме так:

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

Ви можете побачити приклад в реальному часі на Codesandbox - Overflow в CSS Flex / Grid

Можливо, хтось інший може пояснити причини вашої проблеми, але ви можете вирішити її, вказавши висоту контейнера, а потім встановивши висоту зображення 100%. Важливо, щоб widthзображення відображалося перед екраном 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>

Найближче до цього можу дістатись цей приклад:

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

або

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

Основна проблема полягає в тому, що висота приймає відсоток від висоти контейнерів, тому він шукає явно встановлену висоту в батьківському контейнері, а не максимальну висоту.

Єдиний спосіб, який я певною мірою бачу, - це скрипка вище, де ви можете приховати переповнення, але тоді накладка все ще виконує роль видимого простору для втілення зображення, і замість цього замість суцільної облямівки працює замість цього (а потім додавши рамку для рамки, щоб зробити її 200 пікселів, якщо це потрібна ширина)

Не впевнений, чи відповідає це тому, що вам потрібно, але найкраще, що я можу отримати.

Хороше рішення - не використовувати висоту для батьків і використовувати її лише для дитини з View Port :

Приклад скрипки: 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;
}

В основному контейнери добре вміють вміст. Часто це не працює, як навпаки: діти не заповнюють своїх предків добре. Отже, встановіть значення ширини / висоти на самий внутрішній елемент, а не на самий зовнішній елемент, і дозвольте зовнішнім елементам обгортати їх вміст.

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

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

Ваш контейнер не має висоти.

Додати висоту: 200 пікселів;

до контейнерів css і кошеня залишиться всередині.