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

Question

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

Here is a codepen example of what I want to do (having "shrink" and "other" divs the same width than their child image)

<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;
}

是否可以只使用HTML / CSS，即没有Javascript？

提前致谢。

Answer 1

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

这对你有用吗？