I am trying to create a responsive thumb image from an uploaded image. I want the thumb to be uniform in size with other thumb images. So if i upload 3 images of different dimensions, I want the thumb of 3 images to be same in dimensions and still show the image properly. If the Image is too vertical, it should be cropped and displayed.
I don’t want to set the width and height as I want the image to be responsive when displayed. Like 30% of the div or something so it can be viewed properly across multiple platforms.
How can I achieve this?
Are you talking about part of an upload script? It’s unclear if this is something you want to do with PHP or a CSS layout problem. Since you post in PHP I assume that, though the end result may involve both.
PHP has a number of image functions you can use.
You might find some of the code you need here
I think what I want to achieve is more of a CSS issue and not PHP
I created CSS to show and align images to be more specific.
I am still looking at the php image cropping.
If you want to generate thumbnail images on a server, then ImageMagick is a great tool (and I think the most commonly used). See:
Here are the PHP calls for ImageMagick:
There is a function for that:-
Alternatively there are some new css properties that can display images in a specific aspect ratio box, cropped or otherwise,
object-fit: cover may do the job for you.
Should this be moved to the HTML/CSS forum then?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.