Ребенок с максимальной высотой: 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;
}

Кто-нибудь знает, почему ребенок не соблюдал максимальную высоту своего родителя в первом примере? Почему требуется явная высота?

Ответы

Ответ 1

Когда вы укажете процент для max-height для дочернего элемента, это процент от фактической высоты родителя, а не родительский max-height, достаточно странно. То же самое относится к max-width.

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

Когда вы указываете явную высоту для родителя, тогда ребенок знает, что он должен быть не более 100% от этой явной высоты. Это позволяет ограничить родительскую высоту (сохраняя при этом ее соотношение сторон).

Ответ 2

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

Ответ 3

Я нашел решение здесь: 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 */
  }

Ответ 4

Возможно, кто-то еще может объяснить причины вашей проблемы, но вы можете решить ее, указав высоту контейнера, а затем установив высоту изображения на 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>

Ответ 5

Ближайшим, к которому я могу обратиться, является следующий пример:

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

Основная проблема заключается в том, что высота принимает процент высоты контейнеров, поэтому она ищет явно установленную высоту в родительском контейнере, а не max-height.

Единственный способ обойти это в некоторой степени, я вижу, это скрипка выше, где вы можете скрыть переполнение, но затем заполнение по-прежнему действует как видимое пространство для изображения, и вместо этого заменяется сплошной рамкой (а затем добавление пограничного поля, чтобы сделать его 200px, если эта ширина вам нужна)

Не уверен, что это будет соответствовать тому, в чем вы нуждаетесь, но, пожалуй, лучше всего.

Ответ 6

Вы можете использовать свойство object-fit

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

Как предложено здесь

Полное объяснение этого свойства Chris Mills в Dev.Opera

И еще лучший в CSS-трюках

Поддерживается в

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

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

В настоящее время он не поддерживается в IE, но... кто заботится? Кроме того, iOS поддерживает привязку к объектам, но не к объектной позиции, но скоро.

Ответ 7

Вот решение для недавно открытого вопроса, помеченного как дубликат этого вопроса. Тег <img> превышал максимальную высоту родительского <div>.

Сломан: скрипка

Работает: Fiddle

В этом случае добавление display:flex к 2 родительским тегам <div> было ответом

Ответ 8

Хорошее решение - не использовать высоту для родителя, а использовать его только для ребенка с 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;
}

Ответ 9

Вместо того, чтобы использовать max-height: 100%/100%, альтернативный подход к заполнению всего пространства будет использовать position: absolute с top/bottom/left/right, установленным в 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 - Переполнение в CSS Flex/Grid

Ответ 10

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

Добавить   высота: 200 пикселей;

в контейнеры css, и котенок останется внутри.