Элемент изображения flex не уменьшает высоту во flexbox

Question

У меня есть гибкий контейнер, который содержит img гибкий элемент.

Я хочу, чтобы img игнорировал его собственную высоту (90 пикселей), чтобы высота могла уменьшаться в соответствии с высотой гибкого элемента брата.(по умолчанию align-items: stretch стиль).

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

Мы можем увидеть желаемое поведение, если поменяем img на div:

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.dynamicHeightContent {
    width: 120px;
    height: 100%;
    background-color: green;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}

<div class="container">
    <div class="item">
        <div class="dynamicHeightContent"></div>
    </div>
    <div class="item">
        <div class="content"></div>
    </div>
</div>

Я пытался min-height: 0 на img, но безрезультатно.

• Какое особое поведение применяетсяна img, но не div?
• Как мы можем отказаться от особого поведения img, чтобы оно велось как другие элементы flex (например, div)?Если нет способа отказаться, есть ли рекомендуемый обходной путь?

Обратите внимание, что хотя img не будет уменьшать свою высоту, он, по-видимому, растет :

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.content {
    width: 200px;
    height: 300px;
    background-color: hotPink;
}

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

Примечание: я рад игнорировать соотношение сторон img.Я планирую избегать перекоса img через object-fit: cover.

Answer 1

Я думаю, что вы смотрите на это неправильно.

Само изображение имеет высоту 90px, что означает, что содержимое элемента flex имеет высоту 90px (поскольку ваше изображение является элементом flex). Таким образом, ваш div с правой стороны соответствует высоте изображения, потому что он выше высоты div, а не наоборот.

Думайте об этом, как будто вы установили высоту гибкого элемента (изображения) на 90 пикселей. Так что он не будет сжиматься, пока вы не установите его на меньшую высоту. Даже если вы явно не устанавливали высоту изображения в 90 пикселей, но она, естественно, составляет 90 пикселей, поэтому она неявно установлена, что вызывает путаницу. Таким образом, в то время как он растянется выше 90 пикселей в высоту, он не пойдет под него, потому что это высота содержимого гибкого элемента.

В случае, если вы поменяли его на div, и он работает так, как вы себе представляли, это потому, что для элемента .item, который является гибким элементом, не задана высота.

Answer 2

Обратите внимание, что в вашем примере item - это flex item , а не content - вы должны проверить strech поведение item здесь.

---

Как мы можем отказаться от особого поведения img, чтобы оно велось как другие flex-элементы (такие как div)?

Он ведет себя как другие flex-элементы - <img> может быть не очень полезен в качестве flex-элемента , но поведение при растяжении работает отлично:

• если изображение имеет высоту больше item, item растягивается до высоты изображения
• если изображение имеет высоту меньше item, изображение растягивается до высоты content, нарушая соотношение сторон.

См. Демо ниже:

.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
}

.content {
  width: 200px;
  background-color: hotPink;
}

img {
  display: block;
}

<h2>Small content</h2>
<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

Я пытался min-height: 0 на img, но безрезультатно.

min-height: 0 присваивается гибкому боксу столбца вдоль направления гибкого для переопределения поведения по умолчанию auto (для направления строки свойство min-width) - это не работает по поперечной оси .

Ниже приведены подробности и некоторые примеры этого:

• Flexbox влияет на поведение при переполнении

• Изменение размера Flexbox и переполнение при прокрутке

• Почему гибкие элементы не уменьшаются до размера контента?

---

Упаковка изображения в контейнер

Теперь заверните <img> в div и посмотрите ту же ситуацию - поведение stretch снова хорошо:

.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
}

.content {
  width: 200px;
  background-color: hotPink;
}

img {
  display: block;
}

<h2>Small content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

Разница в том, что теперь вы можете успешно использовать object-fit на изображении (это не работает должным образом, если это гибкий элемент ):

.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
}

.content {
  width: 200px;
  background-color: hotPink;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<h2>Small content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

---

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

Единственный способ не учитывать высоту изображения - использовать позиционирование на оболочке изображения:

• позиционирует изображение абсолютно относительно его оболочки,
• Вы можете либо задать ширину для обёртки изображения, либо задать flex: 1 для item, чтобы получить половину доступной ширины по горизонтали.

См. Демо ниже:

.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
  flex: 1; /* equal width for items */
}

.content {
  width: 200px;
  background-color: hotPink;
}

.item:first-child { /* image container */
  position: relative;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; /* position absolutely */
  top: 0;
  left: 0;
}

<h2>Small content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here </div>
  </div>
</div>
<br/>
<h2>Large Content</h2>
<div class="container">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div>
  <div class="item">
    <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div>
  </div>
</div>

Answer 3

хотя это не тот ответ, который вы спрашиваете, но div и img на самом деле ведут себя одинаково, то есть, если содержимое выше высоты, оно увеличивается на высоту

пример:

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.dynamicHeightContent {
    width: 120px;
    height: 100%;
    background-color: green;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}

<div class="container">
    <div class="item">
        <div class="dynamicHeightContent">
        akhsdjahskd<br>
        ajkhsdkjhasd<br>
        ajshdkahsd<br>
        ajsgdjgad<br>
        ajshdasjdh<br>
        </div>
    </div>
    <div class="item">
        <div class="content"></div>
    </div>
</div>

, так как вы настаиваете, что object-fit должен решить эту проблему, вы можете попробовать это, как вы можете видеть, object-fit работает, только если мы установим высоту и ширину, в противном случае браузер попытается сделать так, чтобы «сохранить пропорции» просто попробуйте убрать высоту или ширину из CSS (по одному), вы увидите этот эффект

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

img.item {
    height: 50px;
    width: 200px;
    object-fit: cover;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}

<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>