HTML动态裁剪

Question

I'm currently having trouble showing images in a table.

The images all have different aspect ratios. The different aspect ratios of the images make the table of images look cluttered.

To solve this i would like to crop the part that needs cropping to have the image be exactly square. i already have the scaling down with a php script.

The tricky part is that i can only use HTML, CSS and PHP serverside, everything else is not supported.

So is there any way i can dynamically, without knowing the size of the image crop into a square?

Answer 1

Have a div with specified width and height (the size of your desired square), with it's background-image set to the picture of unknown size centered. Then it will seem that image is "cropped", meaning everyting outside of div's size will not be visible.