3

正方形の DIV と大きな縦長および横長の画像があります。

余分な部分を追加して、画像を DIV に収める必要がありますoverflow:hidden

たとえば。ポートレート設定幅=divの幅の場合高さ:自動

風景の反対。

このスクリプトを試しましたが、うまくいきませんでした

        $('.magic').each(function(){
        if($(this).css('width')>$(this).css('height')){
            $(this).css('height', '300px');
            $(this).css('width', 'auto');                
        }
        else{
            $(this).css('width', '300px');
            $(this).css('height', 'auto');


        }
    });

PS イメージは伸縮できず、スケーリングする必要があります

4

3 に答える 3

5

このようなCSSを使用してください

.magic.portrait {
    height: 300px;
    width: auto;
}

.magic.landscape {
    width: 300px;
    height: auto;
}

JSでクラスを追加するだけです

$('.magic').each(function(){
    if($(this).width() > $(this).height()){
        $(this).addClass('landscape');
    }else{
        $(this).addClass('portrait');
    }
});

これは、アプリケーションのロジックとスタイルを適切に分離するのにも役立ちます。さらに良いことに、これらのクラスをサーバー側に追加し、JavaScript を完全に回避します。

于 2013-03-12T02:11:01.757 に答える
1

本当に javascript/jquery ソリューションが必要な場合は、jQuery AnyStretchプラグインをご覧ください。それはあなたが望むことをするだけです。

于 2013-03-12T02:19:25.860 に答える
0

画像サイズが事前にわかっている場合は、CSS を使用してこれをすべて行うことができます。

JavaScript を使用する必要があると判断した場合、現在のコードの問題は、数値ではなく の$(this).css('width')ような文字列を取得することです。その"300px"ため、数値比較が機能すると予想されるように、2 つの文字列の比較が適切に機能しません。

それを数値に変換するか、単に$(this).width()ピクセル単位で数値を返す which を使用することができます。

作業例:

$('.magic').each(function(){
    var self = $(this);
    var width = self.width();
    var height = self.height();
    if (width > height) {
        self.css({height: "300px", width: "auto"});
    } else {
        self.css({width: "300px", height: "auto"});
    }
});

デモ: http://jsfiddle.net/jfriend00/B7hVp/

于 2013-03-12T02:02:20.783 に答える