使div适应图像大小和比例，受最大尺寸的限制

Question

我在div中有一些图像。

<div class="container">
    <img src="http://placehold.it/200x400">
</div>
<div class="container">
    <img src="http://placehold.it/300x150">
</div>

我找不到满足所有3个条件的CSS组合：

• 任何尺寸的最大长度：5em
• 至少1维的最小长度：5em（即高度或宽度应为5em）（这是我认为我可能需要javascript作为布尔值的地方）
• div完全封闭img，没有多余的空间（因此，div应该与img具有相同的宽高比）

我正在尝试在div上进行CSS大小调整，然后将图像设置为width: 100%, height: auto，因为我也在div上执行其他大小调整功能（调整大小，移动等）。

这是小提琴http://jsfiddle.net/1zvq1rg6/

Answer 1

在display: inline-block尝试修改div的默认显示时，div使用max-height。

对于图像最大宽度/高度，您在此处描述的OR可以使用max-width和div编写。

然后，如果您的padding中没有空格，只需将0设置为.container { display: inline-block; padding: 0; } .container > img { max-width: 5em; max-height: 5em; } 。

admin

http://jsfiddle.net/a1bec8zd