Изменение размера высоты изображения в соответствии с родительской высотой flex

#html #css #image #flexbox #parent

#HTML #css #изображение #flexbox #родительский

Вопрос:

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

Пожалуйста, ознакомьтесь с моим кодом для лучшего понимания:

 .container {
  height: 200px;
  border: 1px solid black;
}

.list {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-item {
  flex: 1;
  border: 1px solid black;
}

.img-wrap {
  height: 100%;
}

.img {
  height: 100%;
}

 <div class="container">
  <ul class="list">
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
  </ul>
</div>

РЕДАКТИРОВАТЬ: фрагмент кода был обновлен с момента первоначального сообщения

1. может быть, без height: 400px или изменить на min-height

2. Если я вынимаю их из потока, тогда братья и сестры игнорируют поля, которые у меня есть. (не ссылаясь на приведенный выше код)

3. может быть, опубликовать код ответа?

Ответ №1:

Вы можете просто добавить

  overflow:hidden;
 flex: 1;

к элементу

HTML

   <div class="container">
  <div class="item">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="item">
<img src="https://via.placeholder.com/150" />
  </div>
</div>

CSS

  .container {
  height: 400px;
  border: 1px solid black;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.item {
  overflow:hidden;
  flex: 1;
  border: 1px solid black;
}

.item img {
  height: 100%;
  width: auto;
}

Попробуйте: https://jsbin.com/tejezuq/edit?html ,css,вывод

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

2. Итак, нам нужно понять полную структуру… Я могу проверить и помочь вам, если у вас есть полная нерабочая база в Plunker (или аналогичная)

3. Обновил мой ответ, пожалуйста, проверьте и дайте мне знать, если он вам все еще не помогает.

4. высота списка не может быть 100%, поскольку она согнута внутри гибкого блока. представьте, что есть 2 списка, высота должна быть установлена на flex: 1

5. Понял, поэтому высота контейнера должна быть 200, а flex 1; Но изображение должно соответствовать высоте контейнера… Я прав?

Ответ №2:

~~высота: 400 пикселей~~

 .container {
  border: 1px solid black;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1 0 auto;
  border: 1px solid black;
}

.item img {
  height: 100%;
  width: auto;
}

 <div class="container">
  <div class="item">
    <img src="https://via.placeholder.com/150" alt="placeholder">
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/150" alt="placeholder">
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/150" alt="placeholder">
  </div>
</div>