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

I assume that you have used IMG tag to display the same image at different places in different sizes. To display image in correct proportion, set one of the dimensions i.e; width or height the other will be adjusted automatically: Example:

<img src="mypic.png" width="75px" /> 

In the above code the image tag will automatically adjust the height for correct proportion.

hope this helps

Answer 2

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

Answer 3

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


<div class="container container100">
    <img src="path-to-img" alt="appropriate alt text">
</div>