css - 容器div适合图像的内容

Question

我想知道是否可以指定图像的div（示例div2）或其他环绕元素以适合其子项的高度和宽度。 此外，图像应调整（保持纵横比）div2的父级的完整可用空间（div1）。

由于图像和宽高比，图像方向，高度和宽度可以动态变化，因此无法进行固定尺寸调整

这是一个小例子： http://jsfiddle.net/rp7u3u2r/1/

<div style="width:200px; height: 200px;">
    <div style="max-height: 100%;max-width:100%;">
        <img style="max-height: 100%;max-width: 100%;" src="..."/>
    </div>
</div>

预期行为：

我已经尝试过'object-fit'，'fit-content'，'display：table-cell'，'display：inline-block'，但似乎没有按预期工作。

Answer 1

更新了小提琴http://jsfiddle.net/rp7u3u2r/3/

<div style="background-color:red; width:200px; height: 200px; font-size:0; line-height: 0;">
    <div style="background-color: green; display: inline-block;">
        <img style="width: auto; height: auto; max-height: 200px;max-width: 200px;"
        src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
    </div>
</div>

Answer 2

使用以下样式：

#div1 {
  width: 200px;
  height: 200px;
}

#div2 {
  box-sizing: border-box;
  height: 100%;
  float: left;
}

img {
  height: 100%;
}

div2和img都会被限制在div1的高度。

box-sizing允许您向div2添加边框和填充，而不会溢出div1。

Fiddle