Адаптивное изображение, не заполняющее DIV при уменьшении области просмотра

Question

У меня есть макет с двумя столбцами, в котором один столбец содержит изображение, а другой - пространство для текста, кнопок и т. Д.

Проблема

Проблема, с которой я столкнулся, связана именно со столбцом изображения. Когда столбец изображения масштабируется в больших окнах просмотра, он отлично работает и масштабируется точно так, как запланировано. Оба столбца настраиваются на одинаковую высоту, и все элементы масштабируются правильно. Однако, когда окно становится меньше, изображение продолжает уменьшаться. Два столбца больше не являются четными, и фон столбца изображения начинает отображаться. Я думаю, что это происходит, потому что изображение пытается сохранить то же соотношение сторон.

Намерение

Предполагается, что при уменьшении области просмотра соответствующие столбцы также уменьшаются, сохраняя одинаковое соотношение ширины, а высота двух столбцов всегда должна совпадать.

Испытанные / Неудачные решения

• height: 100% для атрибута img - это приводит к неправильному масштабированию столбцов.
• Использование элемента picture вместо тега img
• используя object-fit обложку и залейте изображение.

Вот фрагмент кода и JSFiddle http://jsfiddle.net/CztS6/37/

.flex-container {
    width: 100%;
    min-height: 300px;
    margin: 0 auto;
    display: flex;
}
.full-width-four {
    width: calc(33.3333333333%);
    float: left;
    margin-left: 0;
    background: #dbdfe5;
    flex: 1;
}
.recruitment{
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  
}
.full-width-eight{
    width: calc(66.6666666667%);
    float: left;
    margin-left: 0;
    background: #b4bac0;
    flex: 2;
}

<div class="flex-container">
  <div class="full-width-four">
    <img class="recruitment" src="http://via.placeholder.com/570x415"> 
  </div>
  <div class="full-width-eight">Column 2</div>
</div>

Answer 1

Вот мое решение, это то, что вы ищете?

Я прокомментировал min-height: 300px; для flex-container

Я также добавил width:100%; к изображению

.flex-container {
    width: 100%;
    /* min-height: 300px; */
    margin: 0 auto;
    display: flex;
}
.full-width-four {
    width: calc(33.3333333333%);
    float: left;
    margin-left: 0;
    background: #dbdfe5;
    flex: 1;
}
.recruitment{
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  width:100%;
  
}
.full-width-eight{
    width: calc(66.6666666667%);
    float: left;
    margin-left: 0;
    background: #b4bac0;
    flex: 2;
}

<div class="flex-container">
  <div class="full-width-four">
    <img class="recruitment" src="http://via.placeholder.com/570x415"> 
  </div>
  <div class="full-width-eight">Column 2</div>
</div>