I have a site that has a bunch of different images to display, all of different resolutions and aspect ratios. Is there an easy way in CSS to resize and crop images to a certain resolution? For my purposes, I want the resized image to be 280x280.
Of course I can just set <img height = '280' width = '280' /> but this will stretch it. I'd like it to the smaller of the two resolutions, make a square, and then take the center pixels. For example, if the resolution is 480x200 I want it to take a 200x200 section out of the center of the image.
I've tried Googling, but to no avail.
a "real crop" of images with css isn't possible. Real Crop means the the image is reduced to the new values and also it's size is smaller then before.
But there is a solution with negative margins or absolute positioning, which will help you a lot. I've used this technique many times.
Please take a look at: Cropping images with CSS