CODEWITHSUNDEEP
jqueryhtmlcssimageplugins
Azriel Omega
Azriel Omega

Reputation: 949

Image resize and crop to fit the parent div

I'm finding a jquery plugin to resize and crop the image to fit the parent div. Any suggestion ? Thanks.

by my mistake, I mean crop (not scale) the images. Imagine I have many different size images and one fixed size div. I need the image to be resized to fit the vertical or horizontal dimenstion of the div and be cropped the overflow opponent dimension to fit the parent div. It's dynamic so that's why I need a plugin or template to do it for me.

Upvotes: 0

Views: 9809

Answers (3)

John
John

Reputation: 7329

I wrote a Jquery function you can use just send in the class of the parent div and the img size you want to the function and it will adjust the child img to that size and center it either horizontally or vertically. If the img is smaller than the parent div it will scale the parent div down to the size of the child. (It made since to do it like that for what I was using it for.)

DEMO

Here's the html structure

<div class="photo-card-image-wrapper">
    <img src="img.png" />
</div>

Here's the least css needed to make the function work this is needed on the parent div

.photo-card-image-wrapper {
    overflow: hidden;
}

Here's what you need to call the function you just need to send in the parent's class or id like so .photo-card-image-wrapper or if it's an id #photo-card-image-wrapper

$(function() {
  cropAndCenterImage(".photo-card-image-wrapper", 154);
});

This is is the function that you need

function cropAndCenterImage(el, size) {
    //el = img wrapper
    //img = img element
    if (size === undefined || size === null) { 
      size = 154;
    }
    var $el = $(el);
    var $img = $(el + " img");
    //console.log($el);
    //console.log($img);
    $img.width("auto").height("auto");
    var imgWidth = $img.width();
    var imgHeight = $img.height();
    //console.log(imgHeight, imgWidth);

    //hopefully that returns the img to it's default height and width by making the inline style to empty quotes

    if( imgWidth > imgHeight ) {
        //Crop image
      //console.log("width greater than height");
        if ( imgHeight >= size  ) {
            //console.log("hit if");
            $img.height(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgHeight).width(imgHeight);
        } else {
            //console.log("hit else");
            $el.height(imgHeight).width(imgHeight);
            $img.height(imgHeight).width(imgWidth);
        }

        //Center image horizontally
        var leftInt = (imgWidth - $el.width()) / 2;
        $img.css({ "margin-left": "-" + leftInt + "px", "margin-top": "0" });
    } else {
        //Crop image
      //console.log("height greater than width");
        if ( imgWidth >= size  ) {
            $img.width(size);
            imgHeight = $img.height();
            imgWidth = $img.width();
            $el.height(imgWidth).width(imgWidth);
        } else {
            $el.height(imgWidth).width(imgWidth);
            $img.height(imgHeight).width(imgWidth);
        }
        imgHeight = $img.height();
        //Center image vertically
        var topInt = (imgHeight - $el.height()) / 2;
        //console.log(topInt);
        $img.css({ "margin-top": "-" + topInt + "px", "margin-left": "0"});
    }

}

I know it's not your typical Jquery function I just haven't learned to do that yet but it's a function none the less.

Upvotes: 2

Nayana Adassuriya
Nayana Adassuriya

Reputation: 24766

Is this what you want?

<html>
<head>
  <style type="text/css">
  div{ margin:10px 0px; border: 1px solid black; dispaly:block;} 
 div img{width:100%;height:100%;}  
</style>
</head>
<body>
  <div style="width:100px; height:50px"><img src="https://www.google.com/images/srpr/logo4w.png"></div>
<div style="width:100px; height:250px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:200px; height:60px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:300px; height:220px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:200px; height:150px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:300px; height:20px"><img src="https://www.google.com/images/srpr/logo4w.png"></div> 
<div style="width:50px; height:400px"><img src="https://www.google.com/images/srpr/logo4w.png"></div>   
</body>
</html>

Upvotes: 1

VVV
VVV

Reputation: 7593

You don't need a plugin for this... just CSS will do it.

img { width:100%; }

You could also add height:100%; but that won't scale the images proportionally.

Fiddle.

Upvotes: 1

Related Questions