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?
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.
There are multiple options using HTML5: (you have tagged this with HTML5 so I assume you can use it)
void drawImage(Object image, float dx, float dy, [Optional] float dw, float dh);
Specify the required width & height and it will scale the image appropriately, although if there is too much of scaling... you'll see the obvious artifacts
Or
2 You can use another variant of the same function where you can slice part of the image defined by sx, sy, sw & sh and display at destination defined by dx, dy, dw & dh
void drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)