javascript - 让图像尽可能多地占据窗口，而不超出边界

Question

现在问题的标题可能措辞错误。

我希望图像占据 100% 的宽度或高度（我猜以较大者为准）。有点像当你有一个照片浏览器并且在侧面或顶部有一个黑色边框，这取决于它是哪种方式。

显然，如果这是一个非常小的图像，我不希望它拉伸，我从不希望任何图像拉伸，我只是希望它们尽可能多地填充窗口。

例如，当您在 Google 上加载图片时，它不会显示其最大分辨率。如果它太大，它会缩小它以适应页面的边界。然后，您可以根据需要单击它进行放大。

我将如何做到这一点？谢谢。

score 3 · Accepted Answer

我认为您实际上需要以下内容：

.container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

这需要一个具有明确高度设置的容器才能工作。

例子：

score 2 · Accepted Answer

单独使用 CSS 很容易做到这一点：

.container img {
    max-width: 100%;
    height: auto;
}

max-width确保它永远不会超过其容器宽度的 100% 。height告诉浏览器正常调整图像大小（例如，它不会在宽度方向拉伸，但不会在高度方向拉伸），并且包含在旧浏览器中。

如果您希望匹配容器的高度而不是宽度，您当然也可以反转这一点。

编辑：

正如 pburgess 建议的那样，如果您希望图像与宽度或高度匹配，则需要同时声明两者。看到这个jsfiddle：http: //jsfiddle.net/XxgkG/

.container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

请注意，这在 IE6 中不起作用，并且在 IE7 中不稳定。如果你正在为这些悲伤、孤独的浏览器编写代码，你应该看看这个答案。

score 1 · Accepted Answer

演示小提琴

 img{height:auto;width:100%;}

尝试重新调整窗口大小 - 图像将占用最大空间。