CSS: How to crop image that has any size?
I have a website where users can upload their photos and I'd like to prepare a page, where I would display all uploaded images nicely sorted. The problem is, that someone upload the picture in 400x400px resolution, someone in 1400x800px and someone in 300x500px.
On the page, where I would like to print out all the uploaded images, I would like to print each image in the size 100x200px. I tried to manually set up the dimensions of the images, like:
<img src="img.jpg" style="width: 100px; height: 200px" />
But the page looks terrible, all images are blurred. What is the best approach to do that? Maybe to crop the area of 100x200px from each image display it? But how to do that?
In your case, I would try this :
- specify width of 100px on each image
- surround your image by a div with 100x200px size and overflow: hidden