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?

Answers


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

Need Your Help

How can I maximize the editor pane?

editor intellij-idea keyboard-shortcuts maximize-window

In Eclipse, I can type Ctrl+M or click the maximize icon in the editor pane to make the editor pane take up the entire Eclipse window, and then again to restore the pane back to its previous size

General approach to handle Task cancellation correctly

c# .net task-parallel-library async-await cancellation

I'm doing a code review, and I'm concerned about this pattern, seen all across that code:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.