CODEWITHSUNDEEP
javascriptcssimagecrop
Edesa
Edesa

Reputation: 591

Resize multiple images in a uniform size and maintains the ratio

I have multiple images width different sizes, and I want to resize them to fit in a box, and I want to maintain the ratio, and want the images to still look good.

The is 400px by 400px. I have 8 images of different sizes. I want 4 images on the first row and the other four on the last row. So the sizes of each images would be 50px by 50px And I need those images to be in the same ratio as it's original size.

http://deadwoodfilms.com/jquery/gallery/gallery.html

Upvotes: 1

Views: 7815

Answers (5)

Sidrich2009
Sidrich2009

Reputation: 560

And the Future is coming with css3 there is another solution using background images:

http://jsfiddle.net/UVk4Z/3/

HTML:

<div class="first">
</div>
<div class="second">
</div>

CSS:

div {
    width :76px;
    height:76px;
    overflow:hidden;
    margin: 2px;
    float:left;
}

    .first {
            background-image:url(http://www.kulturundkontext.de/img/medien/100BestePlakate/Loesch_Eigensinn_macht_Spass_Copyright_100_Beste_plakate_e.V.jpg);
        background-position: center;
        background-size: cover ;
    }
    .second {
            background-image:url(http://www.wetter-grafik.ch/Design/Grafik-Design/Img-Grafik-Design/LfW_Inserate-Plakate_Detail-1.jpg);
        background-position: center;
        background-size: cover ;
    }

Upvotes: 1

Sidrich2009
Sidrich2009

Reputation: 560

This depends on how to fill the box. You can crop the images or fit the box by downscaling so borders will appear. Anyway if it is possible render those images to fit your needs on the server then deliver them. If not.... fun starts and i guess only js can help cause some calculations will be neccesary:

1. compare image-ratio to box-ratio this can be higher or lower, this tells you wich edge to use as leader for transform width or hight.

2. calculate the new width and height that fit, with same ratio

3. add those values as css attributes to your image ...

An example on croping : http://jsfiddle.net/gn2NY/7/

HTML:

<div>
  <p>
    <img src="http://www.wetter-grafik.ch/Design/Grafik-Design/Img-Grafik-Design/LfW_Inserate-Plakate_Detail-1.jpg" >
  </p>
  <p>
    <img src="http://www.kulturundkontext.de/img/medien/100BestePlakate/Loesch_Eigensinn_macht_Spass_Copyright_100_Beste_plakate_e.V.jpg" >
  </p>
  <p>
    <img src="http://www.weltform.at/wp-content/uploads/2010/10/100bp09_035_02_04.jpg" >
  </p>
  <p>
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/61/Broadway-Plakate.JPG" >    
  </p>
  <p>
    <img src="http://www.wiedenmeier.ch/wordpress/wp-content/uploads/2009/10/lenin_plakate.jpg" >    
  </p>
  <p>
    <img src="http://www.wetter-grafik.ch/Design/Grafik-Design/Img-Grafik-Design/LfW_Inserate-Plakate_Detail-1.jpg" >
  </p>
  <p>
    <img src="http://www.kulturundkontext.de/img/medien/100BestePlakate/Loesch_Eigensinn_macht_Spass_Copyright_100_Beste_plakate_e.V.jpg" >
  </p>
  <p>
    <img src="http://www.weltform.at/wp-content/uploads/2010/10/100bp09_035_02_04.jpg" >
  </p>
  <p>
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/61/Broadway-Plakate.JPG" >    
  </p>
  <p>
    <img src="http://www.wiedenmeier.ch/wordpress/wp-content/uploads/2009/10/lenin_plakate.jpg" >    
  </p>

CSS:

div{
  width:320px;
} 
p{
  position relative;
  display:inline-block;
  float:left;
  overflow: hidden;
  width: 80px;
  height:80px;
}

img{
  position:relative;
}

JS:

var targetHeight = 80;
var targetWidth = 80;
var targetRatio = targetWidth/targetHeight;

function resizeByWidth(obj){
    var oldWidth = obj.width;
    var newWidth = targetWidth;

    var oldHeight = obj.height;
    var newHeight = oldHeight/ ( oldWidth/newWidth );


    var strWidth = newWidth +'px';
    var strHeight = newHeight +'px';
    var strTop = - (newHeight - targetHeight) /2;

    $(obj).css({width: strWidth, height: strHeight, top: strTop});
}
function resizeByHeight(obj){

    var oldHeight = obj.height;
    var newHeight = targetHeight;

    var oldWidth = obj.width;
    var newWidth = (oldWidth / (oldHeight/newHeight) );

    var strWidth = newWidth +'px';
    var strHeight = newHeight +'px';
    var strLeft = - (newWidth - targetWidth) /2 ;

    $(obj).css({width: strWidth, height: strHeight, left: strLeft});
    console.log('By Width done');
}

$('img').each(
    function resize(){    
        imgRatio = this.width / this.height;
        if(imgRatio > targetRatio){
            resizeByHeight(this);            
        }
        else{
            resizeByWidth(this);                    
        }
    }
);

Upvotes: 0

botbot
botbot

Reputation: 7359

This looks like a job for imagemagick.

Upvotes: 0

powerbuoy
powerbuoy

Reputation: 12848

If I understand you correctly you can simply do: 

#resizable img {
    min-width: 100%;
    min-height: 100%;
}

This makes all the images fill their parent boxes while maintaining their aspect ratio. Obviously some images will be cropped. If this is what you're after there's no need to use JS or anything else.

Fiddle: http://jsfiddle.net/5HXGf/1/

Upvotes: 1

Christophe
Christophe

Reputation: 28174

If you want to maintain the ratio, only force one dimension of the image, either the width or the height - not both.

Upvotes: 1

Related Questions