Html 如何将div大小调整为图像显示大小

我有一个里面有图像的div。 div具有固定高度，低于图像固有高度。 我希望div的宽度始终等于图像的“显示”宽度（这是未知div的高度和图像的高宽比的函数）

div{margin:5px；}
img{最大高度：100%；}
.集装箱{
背景色：红色；
显示器：flex；
flex-flow：行nowrap；
宽度：800px；
高度：100px；
溢出：隐藏；
}
.收缩{
flex:01自动；
背景色：#88FF88；
}
.其他{
flex:01自动；
背景色：#8888FF；
}

是否可以只使用HTML/CSS ie而不使用Javascript

---

提前感谢。

删除宽度作为容器属性，div将符合其内容的宽度

---

这对您有用吗？

将宽度作为容器的属性删除，div将符合其内容的宽度

这对你有用吗？

像这样的东西？像这样的？我不希望“container”div与其内容的宽度一致。我希望“收缩”和“其他”div具有这种行为。我不希望“容器”div与其内容的宽度一致。我希望“心理医生”和“其他”部门有这种行为。

<div class="container">
  <div class="shrink">
      <img src="https://dummyimage.com/600x400/0f0/fff" />
  </div>
  <div class="other">
    <img src="https://dummyimage.com/600x400/00f/fff" />
  </div>
</div>

div { margin: 5px; }
img { max-height: 100%;  }
.container {
  background-color: red;
  display: flex;
  flex-flow: row nowrap;
  width: 800px;
  height: 100px;
  overflow: hidden;
}
.shrink {
  flex: 0 1 auto;
  background-color: #88FF88;
}
.other {
  flex: 0 1 auto;
  background-color: #8888FF;
}