Rumyhub

The place where stuff Happens

JQUERY: Easy and Effective way to size images.

As some of you might know, I am one that generally develop at back-end of the application but I do not shy away from front-end development, and lately I have started to develop responsive site to better understand and maybe build an easy way to integrate in future projects.

So I have developed a gallery feature for my new website design which hopefully will be finished with the new back-end CMS (more about this in future posts) and had an issue with the images not properly fitting the container with CSS alone. Therefore I have created a small JQUERY function which can easily adapted with any application

HTML

So lets start with the HTML markup:

<div class="gallery-cell">
   <div class="gallery-image">
      <img src="/images/gallery/1.jpg" />
   </div>
   <!-- Optional -->
   <div class="hiddenplaceholder"></div>
   <div class="gallery_text">
      <div>
         <p>Just some text</p>
      </div>
   </div>
   <!-- End of Optional -->
</div>

As you can see from code above the image tag is within the inner div tag, this can be easily be written without the outer div like so.

<div class="gallery-image">
   <img src="/images/gallery/1.jpg" />
</div>

For a better design, I will continue this tutorial with my structure and will make a small project which will be available for download here.

CSS

Now for the style sheet I have set a width of 31% which is roughly about 350px and height of 350px and an overflow is hidden. Overflow is important because we do not wish for the image to show over the border of the div.

The next class would the one applied with the images which only contains a max-height and max-width of 200%. This is to allow for the image to be bigger and only in worst case scenario the image will not cover the div.

.gallery_cell {
    width: 31.3%;
    height: 350px;
    float: left;
    margin: 1%;
    position: relative;
    overflow: hidden;
}
.gallery_image, .gallery_text, .hiddenPlaceHolder {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.gallery_image {
    overflow: hidden;
    z-index: 3;
}
    .gallery_image img {
        max-height: 200%;
        max-width: 200%;
    }

This will cover all the div in most cases but image which have height more than twice the size of the width or vice versa will not fit properly in the div.

Other issues:

  • Images larger that the div will be capped at 200% at hieght or width
  • Images which has aspect ratio larger than 2:1/1:2 will not fit properly

JQUERY

To fix this, I have created a small function which fills the div accordingly and crop the images in the div.

  • For Portraits: The image is resized by width and keeps the height ratio then centre the image in the div.
  • For Landscape: Same as portrait but instead it is resized by width.

function Rumyhub_ImageResize() {
   $(".gallery_image img").each(function () {
      var thisHeight = $(this).height(); //Gets the hieght of the image
      var thisWidth = $(this).width(); //Gets the width of the image
      var containerWidth = $(this).parent().width();//Get the width of the parent
      var containerHeight = $(this).parent().height();//Gets the height of the parent
      var diff = 0;  //The difference set to 0
      if (thisHeight > thisWidth) { //In case height is greater than the width
      //portrait
          $(this).css("width", "100%"); //The width is set to 100%;
          thisHeight = $(this).height(); //Gets the height of image when it's at 100%;
          diff = thisHeight - containerHeight; //Calculates the difference the image height and it's parent height 
          $(this).css("margin-top", -(diff / 2)); //And sent the margin to the center the image in the div
      }
      else if (thisWidth > thisHeight) { //In case width is greater than the height
      //landscape
          $(this).css("height", "100%"); //Sets the height of the image to 100%
          var thisWidth = $(this).width(); //Gets the width when the images height is at 100%
          if (thisWidth < containerWidth) { //check whether the width is lest than coitaner
             $(this).css("width", containerWidth); //Appied the width of the image to be the same as of the contianer
             thisWidth = containerWidth; //Sets the width of the images the same as the a parent
          }
          diff = thisWidth - containerWidth; //Calculates the difference the image width and it's parent width 
          $(this).css("margin-left", -(diff / 2)); //And sent the margin to the center the image in the div
       }
    });
}

As shown in the above code, in the first statement we check whether the height is greater than the width in that case the image is re sized by width and centered but in the second statement we check if the width is greater than the height in that case the image is re sized by the height and centered.

Download Link: JQUERY RESIZE.zip (466.5KB)



blog comments powered by Disqus