Trying to standardize image into div

I’m stuck on a problem that has probably be seen and seen again but I can’t find exactly what I’m looking for across the internet.

What I’m trying to do is to standardize images.

I’m working with Bootstrap and I want to put some photos into my div but I wan’t them to be all at the same size (“standardize”).

Otherwise if they are to big (and they will always be) I want them to be resize to fit into my div and to crop them if necessary.

For the moment her is what I do :

I’ve tried in jQuery to change the style of the image in function of here ratio :

• If the height is bigger than the width, I switch the style to max-width:100% and height auto.

• Inversement if the width is bigger than the height.

But I’m still new to jQuery and I am probably doing something wrong; can someone light my lantern pls ?

Here is my jQuery

$(document).ready(photoResize);
$(window).resize(photoResize);  

function photoResize(){
    image_w = img.width();
    image_h = img.height();

    if(image_h > image_w)
    {
    img.style("max-width","100%");
    img.height("auto");
    } 
    else if(image_w > image_h)
    {
    img.style("max-height","100%");
    img.width("auto");          
    }   
}

And here is a Fiddle for a better view : https://jsfiddle.net/Baldrani/DTcHh/9793/

Thanks to the people who took the time to read it !


Source: jquery

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.