Harry Harry - 4 months ago 21
HTML Question

Re size different images without distortion

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.

Ana Ana
Answer

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