CODEWITHSUNDEEP
javascriptjqueryhtmlimage-processing
Wesley
Wesley

Reputation: 5621

Render images at a standard size without stretching, with a minimum size

I need to render profile images in a grid of exactly 101x155 each.

Some images are too small, some too big, most are not the right aspect ratio.

How do I show the img with a minimum width and height, no distortion, and show the exact size I want?

Upvotes: 0

Views: 1141

Answers (2)

interphase27
interphase27

Reputation: 81

How about some jQuery? If you just include the <img> with class="grid-img":

$(".grid-img").each(function(i){
   var width = $(this).width();
   var height = $(this).height();
   var ar = height/width;
   if(width > 101) {
      var newWidth = 101;
      var newHeight = 101 * ar;
   } else {
      var newHeight = 155;
      var newWidth = ar / newHeight;
   }
   $(this).height(newHeight);
   $(this).width(newWidth);
});

what this should do is: if the image's width is too big, resize it based on the width (maintaining aspect ratio). if not, resize it based on height (again maintaining AR).

Upvotes: 0

Caleb Kester
Caleb Kester

Reputation: 1728

Without actually modifying the images, you have a few options available to you.

img { max-width: 101px max-height: 155px }

this will make sure that the images don't go above the 101x155px wide. Because they aren't the perfect aspect ratio there still will be whitespace on the sides of the image if the aspect ratio isn't perfect.

Another way would be to encase them in a container

<div><img .../></div>
div {width: 101px; height: 155px; overflow: hidden}
img {width: 101px;} /*or do height: 155px)*/

This isn't perfect but it gives you a different result. This will require the images to be either taller or wider for all images.

The best way would be to resize, but I know we can't always have our way :)

Upvotes: 2

Related Questions