"Crop" image to fit in container as close to desired size as possible without losing ratio

Question

Here's my dilema. I have a box which is 315x210px, and a bunch of images of all kinda of random sizes, some with insane width/height ratios like 210:1, and others with ratios like 2:3, etc.

I'm trying to embed these images in the box and get them as close to 315x210px as possible, without messing up the aspect ratio.

I also don't want to use thumbnails, so I'm embedding the raw image, and using php to calculate the width/height and using css to hide the overflow.

My issue is that I've hit a wall and can't think of a more efficient way to do this. My current method isn't exactly efficient to begin with, so any help is appreciated.

The first if/while works fine to an extent, however I realized when making the second if/while that what I was doing was going to result in a server-crashing death loop. Hence, the second if was never actually finished, so I don't expect it to work. It's just there to show my concept.

I'm open to completely new ideas, but all I ask is that whatever it is doesn't involve creating and thumbnails. I want the original image to be the one that's embedded.

    if($width_orig <= 315 && $height_orig <= 210){
        while($newWidth <= 315 || $newHeight <= 210){
            $newWidth = round($newWidth*1.2);
            $newHeight = round($newHeight*1.2);
        }
    }
    //This one was never intended to work. It's just for example.
    else if($width_orig >= 315 && $height_orig >= 210){
        while($newWidth >= 315 || $newHeight >= 210){
            $newWidth = round($newWidth*1.2);
            $newHeight = round($newHeight*1.2);
        }
    }
    else
    {
        $newWidth = 315;
        $newHeight = 210;
    }

score 1 · Accepted Answer · answered Oct 13 '12 at 01:38

1

You can try

$imageHeight = 500;
$imageWidth = 600;

$maxHeight = 315;
$maxWidth = 210;

$max = ($maxWidth > $maxHeight) ? $maxWidth : $maxHeight;
$ratio = max($imageWidth, $imageHeight) / $max;

$ratio = max($ratio, 1.0);

$newHeight = ceil($maxHeight / $ratio);
$newWidth = ceil($imageWidth / $ratio);

var_dump("Height From: $imageHeight -> $newHeight", "Width From : $imageWidth  -> $newWidth " );

Output

string 'Height From: 500 -> 166' (length=18)
string 'Width  From: 600 -> 315' (length=20)

answered Oct 13 '12 at 01:38

Baba

94,024
28
166
217

I need the image to fill the entire box, (the size of the image needs to be no less than 315x210). That does a good job of resizing to fit inside of the box, but there is still empty space for certain images. – Justin Oct 13 '12 at 01:51
If you force it .. you should lose the shape of your image .. making it distorted ... ...... I would not advice this .... but if you wan t.. you can increase the size of image and then CROP .... this would also affect your image – Baba Oct 13 '12 at 01:55
I'm using CSS to hide the overflow, so that I can increase both dimensions to be larger than the box, but keeping the aspect ratio at the same time. As I mentioned in the question, the first if/while statement does what I need perfectly if the image needs to be increased in size, I just can't think of a way to make the images smaller in size without creating an infinite loop. I also believe there's probably a more efficient way to do it. – Justin Oct 13 '12 at 02:03
You said `some with insane width/height ratios like 210:1` .. if you are not working with ratio .. then the size is fixed .... My Adice use Crop .... See http://stackoverflow.com/a/1856049/1226894 y your image would be `` this would allow you crop your image to the exact size without losing ratio – Baba Oct 13 '12 at 02:14
You are welcome ... In case you are lost on implementation .. you can always drop a message here ..... @user1368667 – Baba Oct 13 '12 at 02:20

score 0 · Answer 2 · answered Oct 13 '12 at 01:33

Well, instead of iteration making it larger on the small images, you can use division such as

if($width_orig <= 315 && $height_orig <= 210){
    $ratio = $width_orig/$height_orig;
    if($ratio > 1.5){ //wider than the desired ratio
        $multby = 315 / $width_orig;
    } else {
        $multby = 315 / $height_orig;
    }
     $newWidth = round($newWidth*$multby)
     $newHeight = round($newHeight*$multby)
}

For getting smaller, that is images that are larger that the box in one or both dimensions, I imagine you would center it, but it might not look right much of the time. You could use the same code as above, just remove the outer if statement since you are planning on hiding the overflow. Do you always want the box filled? If so, why not just remove that like this?

$ratio = $width_orig/$height_orig;
if($ratio > 1.5){ //wider than the desired ratio
    $multby = 315 / $width_orig;//won't always be greater than 1 without the outside loop
} else {
    $multby = 315 / $height_orig;
}
 $newWidth = round($newWidth*$multby)
 $newHeight = round($newHeight*$multby)

Looks decent, but the issue is I'm trying to get the image as close to 315x210 as possible. I've used something like that in the past, and it generally gets the size way off from the size I'm trying to achieve. — Justin, Oct 13 '12 at 01:56

"Crop" image to fit in container as close to desired size as possible without losing ratio

2 Answers2