Is it possible to render an image in two sizes with correct proportion

Question

I have a website on which the products have just one pic associated with them. The dimension of pictures are generally +200 X 200+. At one place, i want to show

Answer 1

In my experience you have to set the image width to 100% of the parent to get consistent results with image resizing. Just setting the max-width doesn't guaranty that the image will fill the parent. This will.

.container {
    overflow:hidden;
}    

.container img {
    width: 100%;
    height: auto;
}

.container100 {
    width: 100px;
    height: 100px;
}

.container75 {
    width: 75px;
    height: 75px;
}