Question

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

问题

我遇到的问题特别是与图像列有关。当图像列在较大的视口中缩放时，它可以很好地工作并完全按计划缩放。两列都调整为相同的高度，所有项目均正确缩放。但是，随着窗口变小，图像也会变小。两列不再均匀，图像列的背景开始显示。我认为这是因为图像试图保持相同的宽高比而发生的。

意图

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

尝试/失败的解决方案

height: 100%属性上的{li> 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

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

我为print(x)评论了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

1 个答案: