Crop image instead of resize (proportions)

5 posts by 2 authors in: Forums > CMS Builder
Last Post: June 18, 2008   (RSS)

By rjbathgate - June 18, 2008 - edited: June 18, 2008

Hi,

I have an image upload, which is displayed a few times around my site in different sizes and different width to heigh ratios.

So for example, I have done the below in order to force specific size on the displayed image:

<?php foreach ($saleRecord['listing_photo'] as $upload): ?>
<?php if ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="225" height="111" alt="" />

But obviously this results in a potentially stretched / out of proportion image.

Is there anyway to have the image cropped to the required dimensions rather than resizing to avoid the proportion problems?

Note, the image is being used in a number of places all in different sizes so one display would be full size, one would be thumbnail size (ratio ok as is) and then there's the problematic one which is shorter.

I hope that makes sense

Cheers in advance
Rob

Re: [rjbathgate] Crop image instead of resize (proportions)

By Dave - June 18, 2008

Hi Rob,

Are you already using thumbnails? The program will automatically create thumbnails for you so you'll have two image sizes to choose from.

If you need more than that one hack we've used from time to time is to just specify the height -or- the width of the image, but not both. If you specify just one of those the browser will automatically figure out the other and keep the image proportional.

If you actually want to crop the image (only show a portion) you may be able to use some CSS tricks for that. Here's a google link with some promising links: http://www.google.com/search?q=css+crop+image

Hope that helps, let me know if you need anything else.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Crop image instead of resize (proportions)

By rjbathgate - June 18, 2008

Hi Dave,

Thanks for the reply.

Does the thumbnail function in the software resize to the specified sizes and then crop to create an in proporption image, or does it do the same as specifying a set width and height in the code?

For example, if the main image was 500px by 500px, and i set the thumbnail size in the software as 100px by 50px, would it resize down to 100px and then crop, or simply give a 50px stretched out across to 100px so out of proportion?

I'll look into css tricks too,

Cheers in advance
Rob

Re: [rjbathgate] Crop image instead of resize (proportions)

By Dave - June 18, 2008

It will keep it's proportion, the thumbnail height and width are "max" values. So it will thumbnail it to a size that fits inside those values.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Crop image instead of resize (proportions)

By rjbathgate - June 18, 2008

Cool, thanks for the advice,

Rob