image - css - 容器 div 使内容适合图像

Question

我想知道是否可以指定一个 div(例如 div2)或图像的另一个周围元素以适合其子元素的高度和宽度。此外，图像应调整大小(保持纵横比)以适应 div2 父级的全部可用空间 (div1)。

由于图像以及纵横比、图像方向、高度和宽度可以动态变化，因此不可能有固定大小

这是一个 fiddle 示例: 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

更新 fiddle 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>