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

【问题标题】：Adapt div to image size and proportion, constrained by maximum dimensions使 div 适应图像大小和比例，受最大尺寸限制
【发布时间】：2016-01-19 01:03:48
【问题描述】：

我在 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 的布尔 OR）
div 将 img 完全包围，没有多余的空间（因此，div 应该与 img 具有相同的纵横比）

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

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

【问题讨论】：

标签： css

【解决方案1】：

在您尝试在此处修改div 的默认显示时，将display: inline-block 用于您的divs（大小适应内容）。

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

然后，如果您不想在 div 中留有空间，只需将 padding 设置为 0。

.container {
  display: inline-block;
  padding: 0;
}
.container > img {
  max-width: 5em;
  max-height: 5em;
}

http://jsfiddle.net/a1bec8zd

【讨论】：