1

我正在使用 jquery 调整大小效果(无 css)

我遇到的问题是调整图像的大小可以正常工作,但我不能让它将两个图像放在同一行,就像设计一样。如果图像是水平的,它将是每行一个,但如果它是垂直的,它应该每行安排两个,并且调整大小对两者都起作用,知道如何实现这一点吗?

这是我的脚本:

    $('.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>

我试过在 .vertical_img 上使用 float:left ,但没有成功。

4

1 回答 1

0

使用display:inline;on.vertical_img应该将这两个图像放在同一行。但是,如果它们的组合宽度大于其容器的宽度,那么它们将出现在不同的行上。

您的容器 ( div.gallery_item) 只有 250 像素宽,这无法正常工作。您的大图像实际上超出了此容器的边界。此容器需要是两个图像组合的externalWidth的宽度(或更大)。

于 2013-02-21T09:20:44.160 回答