Question

我正在使用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>

我尝试使用float：left on .vertical_img没有运气。

Answer 1

在display:inline;上使用.vertical_img时，应将这两张图片放在同一行。如果它们的组合宽度大于其容器的宽度，那么它们将出现在不同的行上。

您的容器（div.gallery_item）宽度仅为250像素，这使其无法正常工作。您的大图像实际上超出了此容器的边界。此容器需要是两个图像组合（或更大）的outerWidth的宽度。

适合两个图像的盒子

1 个答案: