Reputation: 591
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
Reputation: 560
And the Future is coming with css3 there is another solution using background images:
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
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
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
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