缩小视口时，响应图像不会填充DIV

Question

我有一个2列布局，其中一列包含图像，另一列包含文本，按钮等空间。

问题

我遇到的问题是具体使用image列。当图像列在较大的视口处缩放时，它可以很好地工作并且按计划精确缩放。两个柱都调整到相同的高度，所有项目都可以正确缩放。但是，随着窗口变小，图像也会变小。两列不再均匀，图像列的背景开始显示。我认为这是因为图像试图保持相同的宽高比。

意向

目的是当视口缩小时，各列也按比例缩小，同时保持相同的宽度比，并且两列的高度应始终匹配。

尝试/失败的解决方案

• 关于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>