如何捕获上传图像的中心部分？ （制作缩略图）

Question

I have to handle the images uploaded by users and want to make thumbnails out of them, in order to create an image gallery.

The problem is that the images uploaded by the user differ in dimensions, so constraining the dimensions of the thumbnail will make disproportioned images as thumbnails.

Do you know how I can capture the center portion (or truncate the sides) of an uploaded image? Or do you know any script that will handle that?

Thanks a lot

Regards

EDIT:

echo '<div class="pic" style="background-image: url(upload/photos/'.$photo1.')"></div>';

and

    .pic {

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 1

Instead of cropping the images, you can also use a normal resized thumbnail that is big enough to fit the box you want it for completely, and set it as a background image.

So if your box is 100x100 pixels, your thumbnail images need to be resized to 100px width for a vertical image and 100px height for a horizontal image.

By the way, for modern browsers you can use:

background-size: cover;

So that the image completely covers the box, maintaining its aspect ratio.

Edit: So in your php you would do something like:

echo '<div style="background-image: url(' . $path_to_image . ');"></div>';

and in the css:

background-position: center center;
background-repeat: no-repeat;
background-size: cover;