Demo Fiddle

Question

现在问题的标题可能是错误的。

我希望图像占据宽度或高度的100％（我猜哪个更大）。有点像你有一个photoviewer，并在侧面或顶部有一个黑色边框，取决于它是什么。

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

例如，当您在Google上加载图片时，它并未显示出最全面的分辨率。它缩小以适应页面的边界，如果它是大的。然后，如果需要，可以单击它放大。

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

Answer 1

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

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

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

示例：

Answer 2

单独使用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中不稳定。如果您正在编写这些令人伤心，孤独的浏览器，请查看this answer。

Answer 3

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

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