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

If you set ONLY the height OR width of an image, the other dimension gets resized proportionally.

So, if your image container is let's say 100X100 px, you can style the image like this:

div.imageContainer100X100px img {
    max-width: 100px;
    max-height: 100px;
}

Or for 75X75 px:

div.imageContainer75X75px img {
    max-width: 75px;
    max-height: 75px;
}