缩小视口时响应图像未填充 DIV

Question

我有一个 2 列布局，其中一列包含图像，另一列包含 space 用于文本、按钮等。

问题

我遇到的问题是图像列。当图像列在较大的视口中缩放时，效果很好并且完全按计划缩放。两列都调整到相同的高度，并且所有项目都正确缩放。但是，随着 window 变小，图像也会变小。两列不再均匀，图像列的背景开始显示。我认为这是因为图像试图保持相同的纵横比。

意向

目的是随着视口缩小，各列也会缩小，同时保持相同的宽度比，两列的高度应始终匹配。

尝试/失败的解决方案

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

这是我的解决方案，这是您要找的吗？

我为 flex-container

评论了 min-height: 300px;

我还给图片添加了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>

缩小视口时响应图像未填充 DIV

Responsive image not filling DIV when shrinking viewport

html

css

wordpress

image

responsive