图像比例调整大小

Question

这是fiddle。

对于响应式图片，display:block;和max-width:100%;有一个标准技巧：

img {
    display: block;
    max-width: 100%;
}

如果我调整容器的宽度，我的图像会适合此宽度并自动调整其自身的高度。这是非常好的图像行为！它也不使用Javascript。

那么，是否可以通过调整容器的高度来实现相同的技巧？我希望这个图像适合容器高度，并自动按比例调整自己的宽度。当然，没有任何Javascript，只有CSS或任何实验性CSS3功能（我知道如何使用Javascript，真的）。

Answer 1

添加

max-height: 100%;

另外，尽量不要使用表 - 它们比其他显示类型（更多）表现得更不可预测。

请参阅here最基本的示例。

编辑：没有JS，无法找到办法。我在here中为您提供了两种方法 - 两种方法都可以轻松使用（我使用过jQuery，但您没有必要）。如果这还不够，那就好运了。