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

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

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

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

（此设计将有两行或三行缩略图，需要根据窗口高度调整其大小）

（此设计仅包含一行图像（一个电影带），再次调整大小以适应窗口的高度）

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

---

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

不用麻烦了。改用CSS。将img的宽度设置为100%，这样它将始终缩放到容器的最大可用宽度，该容器也不应设置宽度，但您可以设置最大和最小宽度。这就是为什么在调整屏幕大小（或在其他设备上查看）时，浏览器会将图像缩放到尽可能大的程度。不需要JS。

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

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

---

在这里，您可以重新计算高度并更新css样式。

只是一个小提示，为了避免在悬停时缩略图出现小的反弹，请为它们提供与悬停时相同大小的透明边框。这应该可以做到：.sc_菜单一个img{border:1px solid transparent；}@Jaguar这可能行得通，但您必须将图像放在流体容器中（其高度也为百分比）。