1

我遇到的问题是，有时垂直图像没有获得纵横比并且会被拉伸，但是其他一些垂直图像可以很好地获得比例并且可以很好地放入容器中。

两个垂直图像没有得到高度，因为它的容器纵横比 = NaN

这是代码：

function Gallery(selector){
    this.add_module = function(type, image){

        var portrait_text = image.next('.portrait_text');

        var container = $('<div />' , {
            'class' : 'gallery_container'
        }).append(image).append(portrait_text);

        if(type == 'horizontal'){
            var h_ar = image.attr('height') / image.attr('width');
            var c_width = selector.width();
            var c_height = selector.width()*h_ar
            container.css({
                'width' : c_width -10,
                'height' : c_height
            })
        }
        if(type == 'vertical'){
            var c_width = v_width;
            var c_height = v_height
            container.css({
                'width' : Math.floor(v_width) -5,
                'height' : v_height
            })
        }
        container.css({
            'float' : 'left'
        })
        container.find('img').attr({
            'width' : '100%',
            'height' : '100%'
        })
        container.attr('ar' , c_height/c_width)
        container.appendTo(selector);

        //container.children('img').fitToBox();
    }

    this.resized = function(){
        //console.log(sel)
        $('.gallery_container').each(function(){
            if($(this).attr('ar') >= 1){ // vertical
                $(this).css({
                    'width' : Math.floor(sel.width()/2) -5,
                    'height' : sel.width()/2 * $(this).attr('ar')
                })
            }else{ // horizontal
                $(this).css({
                    'width' : sel.width() -10,
                    'height' : sel.width() * $(this).attr('ar')
                })
            }
        })
    }
    var _this = this;
    var gutter = 0;
    // start vars for counting on vertical images
    var v_counter = 0;
    var w_pxls = 0;
    var h_pxls = 0;
    // iterates through images looking for verticals
    selector.children('img').each(function(){
        if($(this).attr('width') < $(this).attr('height')){
            v_counter++;
            h_pxls += $(this).attr('height');
            w_pxls += $(this).attr('width');
        }
    })
    // calculates average ar for vertical images (anything outside from aspect ratio will be croped)
    var h_avrg = Math.floor(h_pxls/v_counter);
    var w_avrg = Math.floor(w_pxls/v_counter);
    var v_ar = h_avrg/w_avrg;
    var v_width = Math.floor((selector.width())/2);
    var v_height = v_width*v_ar;
    var sel = selector;
    selector.children('img').each(function(){
        if(parseInt($(this).attr('width')) > parseInt($(this).attr('height'))){
            _this.add_module('horizontal', $(this));
        }else{
            _this.add_module('vertical', $(this));
        }
    })
    $(window).bind('resize' , _this.resized);
}

var gallery = new Gallery($('#gallery_images_inner'));

任何想法为什么会发生这种情况？

4

1 回答 1

2

不要将图像高度设置为 100%，将高度设置为auto，以便保持比例所需的高度。

问题在这里：

container.find('img').attr({
    'width' : '100%'
})
于 2013-03-11T14:55:48.713 回答