Aspect ratio with vertical images

Question

The problem I have is that sometimes vertical images doesn´t get the aspect ratio and it gets streched, but some other vertical images get the ratio well and fit ok in the container.

The two vertical images doesn´t get height because it´s container aspect ratio its = NaN

this is the code:

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'));

Any ideas why is that happening?

Answer 1

Don't set the image height to 100%, set the height to auto, so that it will get as tall as needed to keep the proportion.

The problem is here:

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