0

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

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

为了更清楚地了解我的意图是什么，您可以查看我的两个设计（很多工作正在进行中

http://annmariegrant.com/test1（这个设计会有两三排缩略图，需要根据窗口的高度调整大小）

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

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

我希望我已经提供了足够的细节来帮助你。您的回复将不胜感激:)

4

2 回答 2

1

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

于 2012-09-13T16:17:54.087 回答
0

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

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

在那里你可以重新计算高度并更新你的 CSS 样式。

于 2012-09-13T16:29:00.063 回答