伸缩行强制子图像将高度缩小到其他内容的100％

Question

采用以下示例；

.row {
  background: #F88;
  margin-top: 20px;
}

.cont {
  display: block;
  height: 82px;
  width: 82px;
  background-color: #0AF;
}

.txt {
  background-color: #0C0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row no-gutters">
    <div class="col-auto"><div class="cont">82px</div></div>
    <div class="col-auto"><img src="https://i.imgur.com/WIxmfZb.png" /></div>
    <div class="col"><div class="txt">Text content</div></div>
  </div>  
</div>

我希望100x100的图像缩小到第二高的列的高度（在示例中，这将是第一列的82px块元素），同时保持其长宽比。

到目前为止，我已经尝试了flex-basis，flex-shrink的各种不同组合，并且设法使种类生效的一种解决方案是将图像样式设置为{{ 1}}，但是在检查器中起作用；

• 它暴露了Chrome中的一个错误，该错误的图像宽度最初为0，直到您调整窗口大小为止，这会将它弹出为正确的宽高比
• 它在IE中不起作用> _>
• 我敢肯定，它违反了某种国际法律，禁止酷刑下一个不得不提起我的代码的开发人员

经过几个小时的暴力破解，我还没有找到解决方案，

• 图像正确填充了弯曲高度的100％（忽略其自身的高度）
• 图像保持其长宽比
• 图像不会溢出
• 图片位置不正确
• 未明确设置图片大小

理想的解决方案应如下所示；

任何帮助将不胜感激。

Answer 1

通过将图像的宽度限制为相同的尺寸，将图像设置为与第一列相同的高度：

.same-as-column-1 {
  max-width: 82px;
}

我不确定是否允许更高的第三列，如果限制在相同的高度，也可以很好地锁定，但不确定是否适用于实际用例。

无论哪种方式，图像似乎都可以满足要求，可以填充弯曲高度的100％，保持其宽高比，不会溢出，并且位置也不绝对/

.row {
  background: #F88;
  margin-top: 20px;
}

.cont {
  display: block;
  height: 82px;
  width: 82px;
  background-color: #0AF;
}

.same-as-column-1 {
  max-width: 82px;
}

.txt {
  background-color: #0C0;
  max-height: 82px;
  overflow-y: scroll;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row no-gutters flex-row flex-nowrap">
    <div class="col-auto">
      <div class="cont">
        82px
      </div>
    </div>
    <div class="col-auto">
      <img class="same-as-column-1" src="https://i.imgur.com/WIxmfZb.png" />
    </div>
    <div class="col">
      <div class="txt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet massa quis nunc porta rutrum nec ac tellus. Phasellus eget ligula tristique, tristique elit ac, mollis eros. Aenean lobortis volutpat sem, et eleifend metus faucibus sed.
          Vivamus at varius nibh. Suspendisse rhoncus posuere elit sed tincidunt. Curabitur blandit in ipsum ut tempor. Mauris et eleifend justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin
          vehicula urna, egestas cursus dolor efficitur id. Aenean tempus vestibulum mauris, a accumsan sem vulputate quis. Maecenas tempor rhoncus molestie. Proin erat metus, cursus lacinia sodales non, malesuada non felis.</p>

        <p>Ut ac luctus elit. Mauris id ipsum id dolor hendrerit rhoncus. Fusce a ligula gravida, porttitor magna a, feugiat est. Maecenas at leo mi. Phasellus volutpat ex vitae nisl euismod, a luctus odio tristique. Maecenas eget tincidunt eros. Etiam auctor
          velit at felis condimentum, sit amet feugiat dolor auctor. Mauris tempus nulla quis ullamcorper porttitor. Etiam nec neque congue, molestie diam vel, suscipit dui. Sed mollis id dolor ut lacinia. Nulla facilisi. Suspendisse ut pellentesque metus.
          In tincidunt ante at pretium mattis. Aliquam egestas neque vel nisi cursus rhoncus.</p>
      </div>
    </div>
  </div>
</div>