0

画像を含む div のリストがあり、それらが適切なサイズであることを確認したいと考えています。このため、親の 100% より小さい場合を除き、通常は 100% 幅です。親の 100% より小さい場合は、元のサイズにする必要があります。これが私のコードです：

$('.sa-img').each(function() {
    img = new Image();
    var obj = $(this);
    img.onload = function() {
        //console.log(this.width + ' <= ' + obj.outerWidth());
        if (this.width <= obj.outerWidth())
            obj.css({'width':this.width +'px'});
        }
        img.src = $(this).attr('src');
    }
});

HTML に関しては、次のように簡単です。

<div class="sa-img-container">
    <img class="sa-img" src="<?=$img_url?>" />
</div>

これで、最初の画像を除いて、うまく機能します。私はそれについて何をしますか？まるでそれがロードされるのを待っていないかのようです。画像を並べ替えても問題ありません。最初に苦しむのは常に画像です。元のサイズの出力は常に 100 です。これにより、100% より大きいという事実に関係なく、画像の元のサイズにサイズ変更されます (たとえば、220px の画像は、204px div 内で 100% ではなく 220px にサイズ変更されます)。 - レイアウトが期待どおりに機能しない。

4

1 に答える 1

1

上記のコメントのように、これは CSS を使用して非常に簡単に実現できます。具体的にはmax-width物件。

画像の幅が 600 ピクセルであると仮定すると、次のようになります。

.resize-to-100{
    width: 500px;
    background: red;
}
.dont-resize{
    width: 750px;
    background: yellow;
}
img{
    max-width: 100%;
}

例: http://jsfiddle.net/efbVZ/

于 2013-05-12T11:59:36.947 に答える