使用JavaScript根据窗口/视口的高度动态调整图像大小

Question

我正在尝试为摄影师设计一个网站，它会调整图像和缩略图的高度，使其符合用户的窗口大小。这是我第一次尝试流体布局而不是固定宽度布局。

图像需要根据浏览器的高度调整大小，并且必须保持宽高比。

为了更清楚地了解我的意图，你可以看到我的两个设计（非常多的工作正在进行中

http://annmariegrant.com/test1（此设计将有两到三行缩略图，需要根据窗口的高度调整大小）

http://annmariegrant.com/test2（此设计只会有一行图像（幻灯片），再次调整大小以适应窗口的高度。）

到目前为止，我只是进行了一次测试，访问了图像的.width DOM元素并对其进行了更改，但我似乎无法让它正常工作，而且有点超出我的深度，因为我是sorta在这里学习JavaScript！

我希望我能为您提供足够的细节以便能够提供帮助。非常感谢您的回复：）

Answer 1

不要打扰。请改用CSS。将img的宽度设置为100％，因此它将始终缩放到容器的最大可用宽度，该宽度也应该没有设置宽度，但您可以设置最大和最小宽度。这就是为什么当屏幕调整大小（或在不同的设备上查看）时，浏览器将图像缩放到尽可能大的尺寸。不需要JS。

Answer 2

您希望在窗口调整大小时重新计算图像的大小。为此，您需要将JavasScript放入窗口调整大小事件

window.onresize = function(event) {
    ...
}

在那里你可以重新计算身高并更新你的CSS风格。