Ребенок с максимальной высотой: 100% переполняет родителя

Question

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

}

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

536 9

css

9 ответов:

Comments

Ничего не найдено.

BoltClock · Accepted Answer · 2013-01-10 19:53:03

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

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

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

Daniel · Accepted Answer · 2018-01-19 23:25:03

.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 я получил хороший результат с использованием значения свойства inherit. Это вам поможет?

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

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

Niente1 · Accepted Answer · 2014-11-21 17:51:43

Я нашел решение здесь: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

трюк возможен, потому что существует связь между шириной и заполнением-нижней частью элемента. Итак:

родители:
container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }
детей (удалить все css, связанные с width, т. е. ширина:100%):
img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

Kevin Brydon · Accepted Answer · 2013-01-10 19:16:53

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

ashleynolan · Accepted Answer · 2013-01-10 19:17:47

ближе всего я могу подойти к этому примеру:

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%; 
}
основная проблема заключается в том, что высота принимает процент высоты контейнеров, поэтому он ищет явно заданную высоту в Родительском контейнере, а не максимальную высоту.

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

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

Luis Sieira · Accepted Answer · 2017-05-23 14:54:55

вы можете использовать свойство object-fit
.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}
Как предложил здесь

полное объяснение этого свойства Крис Миллс в Dev.Опера

и еще лучше в CSS-Tricks

он поддерживается в

Chrome 31+

Safari 7.1+

Firefox 36+

Опера 26+

Android 4.4.4+

iOS 8+

Я только что проверил, что vivaldi и chromium также поддерживают его (неудивительно здесь)

в настоящее время он не поддерживается в IE, но... кому интересно ? Кроме того, iOS поддерживает object-fit, но не object-position, но это будет скоро.

tibbus · Accepted Answer · 2018-02-13 12:24:47

хорошее решение-не использовать height на родителе и использовать его только на ребенке с Посмотреть Порт:

пример скрипки: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;
}

CrazyPaste · Accepted Answer · 2018-05-10 23:43:07

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

разбито: Скрипка

работает: Скрипка

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

Raffael · Accepted Answer · 2013-01-10 19:22:20

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

добавить высота: 200px;

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