Question

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

两个垂直图像没有高度，因为它的容器长宽比为= 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'));

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

Answer 1

不要将图像高度设置为100％，将高度设置为auto，这样它就会达到保持比例所需的高度。

问题在于：

container.find('img').attr({
    'width' : '100%'
})

纵横比与垂直图像

1 个答案: