html - 图像比例调整大小

Question

这是一个小提琴。

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

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

如果我调整容器的宽度，我的图像会适合这个宽度并且还会自动调整它自己的高度。这是非常棒的形象行为！它也不使用Javascript。

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

Answer 1

添加

max-height: 100%;

此外，尽量不要使用表格——它们的行为（更多）比其他显示类型更不可预测。

请参阅此处的一个最基本的示例。

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