1

Web サイトに 3 つの異なるサイズの画像を並べて配置しており、jQuery を使用してブラウザーのサイズに基づいてサイズを変更したいと考えています。

$(window).bind('load resize', function() {
    var windowheight = $(window).height();
    $('#pictures img').each(function() {
        $(this).height(windowheight);
    });
});

そして私が持っているCSSファイルには：

#pictures img {
    width:auto;
    max-height:100%;
}

すべての画像の高さが同じ場合、このコードは正しいですが、3 つの画像すべての高さが異なることを考えると、height() 関数に渡す値がわかりません。

何か案は？

前もって感謝します

4

2 に答える 2

0

画面の高さと幅を取得し (こことここで説明)、簡単な計算を使用して画像のサイズを変更できます。何かのようなもの

picture_new_height = (actual_picture_height) * (window_height / screen_height)
于 2013-02-03T11:40:30.897 に答える
0

あなたのCSSで

img {max-width:100%;max-height:100%;}

次に、コンテナの寸法も % で設定するので、実際にはそのための JavaScript は必要ありません

NB1: 完全なレンダリングのための「実際の」サイズ変更は、サーバー側で行う必要があります。しかし、それはその場でちょっと遅いでしょう

NB2: 現在、クライアント側のサイズ変更のための最新のブラウザー ソリューションがあります (高さの設定よりも複雑です...)

于 2013-02-03T11:31:30.667 に答える