Как сделать так, чтобы изображение заполняло гибкий элемент flex-grow?

Question

Я прочитал все существующие решения, в которых изображения могли бы заполнить содержащие div, но я не нашел решения для заполнения div без статического измерения, такого как div, который был только выложен flex-grow.

В настоящее время изображение уничтожит пропорции flex-grow, которые я установил для контейнера.Я хочу, чтобы img просто заполнял элемент div, а не растягивал элемент div.

Как можно больше, я не хочу использовать встроенный стиль.

Существует ли существующий полифилл или решение?к этому?

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
  flex: 1;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.sub-container > div {
  flex-grow: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
  background-color: yellow;
}

.second-container>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

<div class="container">
  <div class="sub-container">
    <div class="first-container">
      A
    </div>
    <div class="second-container">
      <img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" />
    </div>
  </div>
</div>

http://jsfiddle.net/jojonarte/tu3nbw4q/

Answer 1

У вас есть это в вашем коде:

.sub-container > div {
  flex-grow: 1;
}

Хорошо, это определяет flex-grow.

Но вы не определили flex-basis.В результате, flex-basis сохраняет свое значение по умолчанию, а именно: auto (т. Е. Определенное содержимое) .

Это то, что вы видите в своем макете: гибкий элементразмер которого определяется содержимым.

Другими словами, поскольку естественные размеры изображения настолько велики (по сравнению с размером контейнера), изображение занимает все свободное пространство и flex-grow не имеет никакого эффекта (у него нет свободного места для распространения).

В качестве решения добавьте это к правилу:

.sub-container > div {
  flex-grow: 1;
  flex-basis: 0; /* new */
}

или, более эффективно:

.sub-container > div {
  flex: 1; /* fg:1, fs:1, fb:0 */
}

пересмотренная скрипка

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

/* ADJUSTMENT HERE */
.sub-container > div {
  flex: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
  background-color: yellow;
}

.second-container>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

<div class="container">
  <div class="sub-container">
    <div class="first-container">A</div>
    <div class="second-container">
      <img src="https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg" />
    </div>
  </div>
</div>

Дополнительная информация:

• Чтобы избежать проблемы, описанной в вопросе, как правило, используйте flex свойство вместо flex-grow, flex-shrink и flex-basis по отдельности.

  Из спецификации flexbox:

  § 7.2.1.Компоненты гибкости

  Авторам рекомендуется контролировать гибкость с помощью сокращения flex, а не напрямую с его свойствами, так как сокращение корректно сбрасывает любые неуказанные компоненты для удовлетворения общего использования .

• Узнайте больше о разнице между flex-basis: auto и flex-basis: 0

Answer 2

Используйте background-image вместо использования img тега и используйте background-size: 100% 100%;:

См. Скрипку

.container {
  display: flex;
  min-height: 300px;
  width: 500px;
  flex: 1;
}

.sub-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.sub-container>div {
  flex-grow: 1;
}

.first-container {
  background-color: blue;
}

.second-container {
      background: url(https://internationalbarcodes.net/wp-content/uploads/2017/04/QR%20code%20example.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

<div class="container">
  <div class="sub-container">
    <div class="first-container">
      A
    </div>
    <div class="second-container">

    </div>
  </div>

</div>