调整图像大小以适应更改的浏览器窗口

Question

如何调整图像大小以使用浏览器窗口进行调整？我希望图像适合白色框。我有以下代码：

.image { 
    position: relative;
    width: 100%;
}

适合大小浏览器窗口的图像大小应该是多少？目前的照片宽约900px。

更新

这是我在Dreamweaver中使用的模板中的代码：

.container {
    width: 80%;
    max-width: 1260px;
    min-width: 780px;
    background-color: #FFF;
    margin: 0 auto;
}

如果最大宽度为1260像素，图像应该是1260像素吗？然后在浏览器窗口缩小时缩小图像范围？

Answer 1

这可以使用纯CSS完成，甚至不需要媒体查询。 要使图像灵活，只需添加max-width：100％和height：auto。 Image max-width：100％和height：auto在IE7中工作，但不在IE8中（是的，另一个奇怪的IE bug）。要解决此问题，您需要为IE8添加宽度：auto \ 9. CSS：

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

如果您想强制执行图像的固定最大宽度，只需将其放在容器中：

<div style="max-width:500px;">
<img src="..." />
</div>

Answer 2

为什么不应用css代码：

img {width: 100% }

这应该可以解决问题...