3

How can I resize and align a picture within a div?

I need to show resized images on a 50x50px div. I also want them to be centralized on the div. I've made this image below to show exactly what i want to do.

enter image description here

The problem in that the CSS needs to work when the image is larger on width, and when it's larger on height.

I've found this solution using max-width or max-height, but it only works for one option (larger width, or larger height):

div.img-crop-thumb
{
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
.img-crop-thumb img
{
    position: absolute;
    top: 0px;
    left: -50%;
    max-width: 30px;
    height: auto;
}
Ry-
  • 218,210
  • 55
  • 464
  • 476
Leandro Faria
  • 445
  • 2
  • 11
  • 25

3 Answers3

2

Here is my function for this (PHP). Although I do loads of dynamic image file calls

function remoteFileExists($url) {
    $curl = curl_init($url);

    //don't fetch the actual page, you only want to check the connection is ok
    curl_setopt($curl, CURLOPT_NOBODY, true);

    //do request
    $result = curl_exec($curl);

    $ret = false;

    //if request did not fail
    if ($result !== false) {
        //if request was ok, check response code
        $statusCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);  

        if ($statusCode == 200) {
            $ret = true;   
        }
    }

    curl_close($curl);

    return $ret;
}

function pictureResize($imgDest, $width, $link){
    $default_pic = "default location"; //set a default image if none exists
    $exists = remoteFileExists($imgDest);
    if ($exists) {
        list($w_orig, $h_orig) = getimagesize($imgDest); //get size
        if($w_orig > $h_orig){ // if the width is greater than the height
            $ratio = $w_orig / $h_orig; // get the aspect ratio of the image
            $newWidth = $width * $ratio; // make a new width size
            $margin = round($newWidth/2); // find the margin
            $thisPic = '
                <div style="height:'.$width.'px; overflow:hidden; position:relative; width:'.$width.'px;">
                <img src="'.$imgDest.'" height="'.$width.'px" style="position:absolute; left:50%; margin-left:-'.$margin.'px;" /></div>'; 
        }else{
            $thisPic = '
                <div style="height:'.$width.'px; overflow:hidden; width:'.$width.'px;">
                <img src="'.$imgDest.'" width="'.$width.'px" /></div>'; 
        }
    }else{
        $thisPic = '
                <div style="height:'.$width.'px; overflow:hidden; position:relative; width:'.$width.'px;">
                <img src="'.$default_pic.'" width="'.$width.'px" height="'.$width.'px" style="position:absolute; left:50%; margin-left:-'.round(($width/2)-1).'px;" /></div>';
    }
    return $thisPic;
}

This doesn't center the height but it will center the width. Call the image like so...

pictureResize($imgDest, /*set an int value for size*/, "set a string for location");

I hope this will at least point you in the right direction

Juan Gonzales
  • 1,967
  • 2
  • 22
  • 36
  • Why the server trip? It's doable on the client side as far as the images don't need to be saved as thumbs! ;) – Rutwick Gangurde Mar 10 '13 at 05:35
  • I agree, but for my personal requirements it is necessary do to other issues like needing to find if the file exists and looping through tons of users. Since he did not mention which way he was getting the image, I thought I'd throw it up here and if nothing else help him with the logic – Juan Gonzales Mar 10 '13 at 05:49
  • In fact, my app is in Asp.Net so you PHP code wouldn't help me much. Anyway the trick with the image on the div's background-image worked fine. Thank you very much anyway! – Leandro Faria Mar 10 '13 at 06:38
  • It's all good, just trying to do my part and help the SO population – Juan Gonzales Mar 10 '13 at 06:41
1

Using JavaScript:

WORKING DEMO: http://jsfiddle.net/wV4tn/

(Works smoothly for landscape, portrait and square sizes!)

//Takes in image's original width/height and the container's width height
function scaletofit(imgw, imgh, contw, conth){
    var perc = 0;
    if((conth / contw) > (imgh / imgw)){
        perc = contw / imgw;
    } else {
        perc = conth / imgh;
    }
    return [Math.round(imgw * perc), Math.round(imgh * perc)];
}

For centralizing in the div, put left: 50% and margin-left as -imagewidth/2 OR top: 50% and margin-top as -imageheight/2, depending on what you need.

Rutwick Gangurde
  • 4,772
  • 11
  • 53
  • 87
  • Thanks!! It really worked. But i think that the trick with the div's background-image easier. Thank you very much anyway! – Leandro Faria Mar 10 '13 at 06:39
1

Use CSS3 background-size: cover.

Here's a working example: http://jsfiddle.net/HBPRv/.

And you can read the documentation here.

Jonathan Potter
  • 2,981
  • 1
  • 24
  • 19