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


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

    if(image_h > image_w)
    else if(image_w > image_h)

And here is a Fiddle for a better view :

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

Source: jquery

Leave a Reply