1

私はjquery（CSSなし）でサイズ変更効果に取り組んでいます

私が抱えている問題は、画像のサイズ変更が正常に機能することですが、デザインのように2つの画像を同じ行に配置することはできません. 画像が水平の場合は1行に1つになりますが、垂直の場合は1行に2つ配置し、両方でサイズ変更を行う必要があります。これを達成する方法はありますか?

これは私のスクリプトです：

    $('.gallery_item').each(function(){
        $('.gallery_img').each(function(){
            var ww = $(window).width() - 60 - 230;
            var wh = $(window).height() - 60;
            var iar = $(this).attr('height') / $(this).attr('width');
            var war = wh / ww;
            if(iar <= war){
                $(this).attr("width" , ww);
                $(this).attr("height" , ww * iar);
            }else{
                $(this).attr("height" , wh);
                $(this).attr("width" , wh / iar);
            }
            $('.gallery_item').css({
                'width' : $(this).attr('width'),
                'height' : $(this).attr('height'),
                'padding-bottom' : 0
            });
        });
    })

    $(window).bind('resize' , function(){

    $('.gallery_item').each(function(){
        $('.gallery_img').each(function(){
            var ww = $(window).width() - 60 - 230;
            var wh = $(window).height() - 60;
            var iar = $(this).attr('height') / $(this).attr('width');
            var war = wh / ww;
            if(iar <= war){
                $(this).attr("width" , ww);
                $(this).attr("height" , ww * iar);
            }else{
                $(this).attr("height" , wh);
                $(this).attr("width" , wh / iar);
            }
            $('.gallery_item').css({
                'width' : $(this).attr('width'),
                'height' : $(this).attr('height'),
                'padding-bottom' : 0
            });
        });
    })

    });

そして私のマークアップ：

                    <div class="gallery_item">
                        <img class="gallery_img" src="img/gallery0.jpg" alt="gallery0" width="850" height="567">
                        <img class="gallery_img vertical_img" src="img/gallery1.jpg" alt="gallery1" width="380" height="570">
                        <img class="gallery_img vertical_img" src="img/gallery2.jpg" alt="gallery2" width="382" height="570">
                    </div>

float:left を .vertical_img で使用してみましたが、うまくいきませんでした。

4

1 に答える 1

0

display:inline;onを使用する.vertical_imgと、これらの画像が両方とも同じ行に表示されます。ただし、それらの合計幅がコンテナーの幅より大きい場合、それらは別の行に表示されます。

コンテナ ( div.gallery_item) の幅は 250px しかないため、これが機能しません。大きな画像は、実際にはこのコンテナーの境界を超えています。このコンテナは、結合された 2 つの画像のouterWidthの幅 (またはそれ以上) である必要があります。

于 2013-02-21T09:20:44.160 に答える