Re size different images without distortion

aspect-ratio, css, html, image

Solution

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%;
}

Problem

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.

Original source