0

ユーザーのウィンドウ サイズに合わせて画像とサムネイルの高さを変更する写真家向けの Web サイトを設計しようとしています。固定幅ではなく流動的なレイアウトを試みたのはこれが初めてです。

ブラウザの高さに基づいて画像のサイズを変更し、縦横比を維持する必要があります。

私の意図をより明確に理解するために、私が持っている 2 つのデザインをご覧ください (非常に多くの作業が進行中です)。

http://annmariegrant.com/test1 (このデザインには 2 行または 3 行のサムネイルがあり、ウィンドウの高さに基づいてサイズを変更する必要があります)

http://annmariegrant.com/test2 (このデザインには 1 行の画像 (フィルムストリップ) があり、ウィンドウの高さに合わせてサイズが変更されます)。

これまでのところ、画像の .width DOM 要素にアクセスして変更する小さなテストしかありませんが、JavaScript を学習しているため、適切に機能させることができず、深さから少し外れています。ここでオンザフライ！

お役に立てるように、十分な詳細を提供できたことを願っています。あなたの応答は大歓迎です:)

4

2 に答える 2

1

気にしないでください。代わりにCSSを使用してください。imgの幅を100％に設定して、コンテナの使用可能な最大幅に常にスケーリングされるようにします。これも幅を設定する必要はありませんが、最大幅と最小幅を設定できます。これが、画面のサイズが変更されたとき（または別のデバイスで表示されたとき）に、ブラウザによって画像が可能な限り大きくなるように拡大縮小される理由です。JSは必要ありません。

于 2012-09-13T16:17:54.087 に答える
0

You want to recalculate the size of your images when window resizes. To do this, you need to put your JavasScript in the window resize event

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

In there you can recalculate the height and update your css style.

于 2012-09-13T16:29:00.063 に答える