Re size different images without distortion

Question

All the images have one thing in common; they are all 300 or 600 pixels wide. But the heights vary from around 300-900 pixels. Now I need a small group of the images which will be used to suggest other images for the user. These will only be around 100x200 pixels(might change). My previous attempt has made the images shrink into the 100x200 aspect ratio. I need it to overlap, but the excess is hidden.

Answer 1

Try something like this http://dabblet.com/gist/2769112

The CSS you will need is simply

.img-container {
    width: 200px; /* whatever set width */
    height: 100px;
    display: inline-block; /* or you could float them */
    overflow: hidden;
}
.img-container img {
    width: 100%;
}

Answer 2

Put the images in a wrapping element, such as a DIV, with a defined height and width and use overflow:hidden.