Problems with image sizes

0
votes

I wrote an app for image contest and what I am trying to achieve now is to display those images. I m facing a little problem.

I resized the images for 400 px by 400 px by keeping aspect ratio. Which means one image can be 400px width and 200px height. and another image can be 100px width and 400px height.

Client app want to dislay them in a grid with fixed height and width.

http://jsfiddle.net/tbedf/1/

There is this css trick which show partial of the image but when i do that some show only the left corner of the image which can just white or black in that region so no good for me.

When i look at facebook they do a pretty good job of aligning the images and showing the center of it i guess.

how can i get this working?

Thumbnail size requested to be displayed is 100px by 100px

Thanks.

3
javascripthtmlcssimage
Consider rewording this phrase: "some images doesnt at white in that region", since it does not mean anything at the moment. – lanzz
You accidentally a word. – Romain Valeri
Why are you using - li:hover { height:auto; } ? – Dipak
rephrased it sorry. it s 1 am here. and forget about li:hover, thats jsut for example. – DarthVader
@DarthVader do you mean solution similarly to my updated example? – Vladimir Starkov

3 Answers

1
votes

Why not align them to center and hide the overflow using something like this?

<div style="overflow:hidden;text-align:center;width:100px;height:100px;>
<img src="">
</div>
1
votes

Try to store width and height of each images with javascript, and then apply following styles to images in loop:

position: absolute;
top: 50%;
margin-top: -1*($height/2); /* $height = stored height of current image */
right: 50%;
margin-right: -1*($width/2);  /* $width = stored width of current image */

On li apply position: relative;

I made jQuery demo for you — jsFiddle demo

jQuery code:

$(function() {
    var imgs = $('ul > li img');

    $.each(imgs, function(i, img) {
        /* cache variable for better performance */
        var $img = $(img);
        $img.css({
            'margin-top': $img.height()/-2,
            'margin-left': $img.width()/-2
        });     
    });
});​

CSS:

li {
    float: left;
    height: 100px;
    width: 100px;
    overflow: hidden;
    margin: 10px;
    padding: 10px;
    position: relative;
}

li:hover { overflow: visible; }

li img {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
}
0
votes
li { float:left; height:100px; overflow:hidden; margin:10px; padding:10px 10 0;}
li:hover { height:auto; }    ​

This one makes all the thumbnail 100px by 100px