html - 图像比例调整大小

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，但您不必使用)。如果这还不够，那么祝你好运。