0

わかりましたので、画像の幅が高さよりも大きいかどうかを確認してからクラスを適用し、そうでない場合は別のクラスを適用しようとしています。

jQuery('.product_block img').each(function() {
    if(jQuery(this).css('width') > jQuery(this).css('height')) {
        jQuery(this).addClass('product_block_height');
    } else {
        jQuery(this).addClass('product_block_width');
    }
});

クラス：

.product_block_height { height: 100% !important; width: auto !important; }
.product_block_width { width: 100% !important; height: auto !important; }

高さが指定されていない画像を囲むdivが画像を押しつぶさないようにしようとしていますが、周囲のdivがオーバーフローでトリミングした後、jqueryは画像の高さと幅を取得しています：非表示...私スライドショー形式の画像を持つレスポンシブグリッドがあります..画像（元のファイル）の幅が高さよりも大きい場合、周囲の高さに拡張するには高さが必要であると言うのに苦労しています幅を auto にしてつぶれないようにしますが、クライアントは (350x350 である必要があります) の制限なしで任意の画像サイズをアップロードできることに注意してください。それらをアップロードする前に。

4

1 に答える 1

1

画像のコピーを画面外の要素に測定してみることができます。私は以前にこのようなものを使用しました：

jQuery("<div id='TempImageArea' style='visibility:hidden; position:absolute; z-index:-999; zoom:1; top:-1000px; left:-1000px;'><img id='TempImage' /></div>").appendTo("body");

//Loop through your images
jQuery('.product_block img').each(function() {
    //copy image src to temp image
    var $this = jQuery(this);
    var $tempImage = $("#TempImage");
    var imageSrc = $this.attr("src");
     $tempImage.attr("src", imageSrc);    
    //Test dimensions and add correct class
    if($tempImage.width() > $tempImage.height()) {
        $this.addClass('product_block_height');
    } else {
        $this.addClass('product_block_width');
    }

});

//Remove the off-screen element
jQuery("#TempImageArea").remove();

作業例: http://jsfiddle.net/fKxuc/

于 2013-09-10T17:24:26.130 に答える