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

Posted 2023-03-05

【中文标题】缩小视口时响应图像不填充DIV

【英文标题】：Responsive image not filling DIV when shrinking viewport

【发布时间】：2019-02-06 02:04:00

【问题描述】：

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

问题

我遇到的问题是图像列。当图像列在更大的视口上缩放时，它工作得很好并且完全按照计划进行缩放。两列都调整到相同的高度，并且所有项目都正确缩放。然而，随着窗口变小，图像也越来越小。两列不再均匀，图像列的背景开始显示。我认为这是因为图像试图保持相同的纵横比。

意图

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

尝试/失败的解决方案

height: 100% 在 img 属性上 - 这会导致列无法正确缩放。 使用picture 元素代替img 标签 在图像上使用object-fit 的封面和填充。

这是一个代码 sn-p 和一个 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>

【问题讨论】：

请尝试.recruitmentheight: 100%;

【参考方案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>