javascript - 适合包含两个图像的框

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>

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

Answer 1

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

您的容器 (div.gallery_item) 只有 250 像素宽，这导致此功能无法正常工作。您的大图像实际上超出了该容器的边界。该容器的宽度需要为 outerWidth两个图像的组合(或更大)。