2

縦スクロールのフォト ギャラリーに問題があります。縦の画像のサイズを変更したいのですが、横の画像はそのままで問題ありません。横方向の画像は幅 900px で、縦方向の画像は高すぎて快適な画面表示にはならないため、幅 440px の縦方向の画像を 2 つと、横方向の 1 つの下に 20px の中央余白を配置する必要があります。

Web サイトは Cargocollective にあるため、PHP は使用できず、Jquery、Javascript、および CSS しか使用できず、HTML に追加することしかできません。誰にも解決策がありますか？

画像の比率を検出し、高さ > 幅の場合にのみサイズを変更する方法

ありがとう

4

2 に答える 2

4 
$('img').each(function(i,obj){
    if($(obj).height() > $(obj).width()){
        //portrait, resize accordingly  
    }else{
        //landscape display; the default you want.
    }
});

jQuery 1.7 以降では、$.each イテレータを使用せずに各画像のプロパティにアクセスできます。

$('img').prop('height', function(){
    if($(this).height() > $(this).width()){
        //portrait, resize accordingly  
    }else{
       //landscape display; the default you want.
    }
});
于 2012-08-26T23:55:10.030 に答える
2

高さ/幅が計算されているときに画像が読み込まれることを確認するOhGodwhyの回答のバリエーション。

$('#myElement img').load(function(){
    if($(this).height() > $(this).width()){
        //portrait, resize accordingly  
        var width = $(this).width();
        var height = $(this).height();
        var newWidth = 400;
        var newHeight = newWidth * (height / width);
        $(this).width(newWidth).height(newHeight);
    }else{
        //landscape display; the default you want.
    }
});
于 2012-08-27T00:02:26.707 に答える