Different image sizes in a fixed sized container

Question

I am re-sizing an image after a user uploads it to maintain its aspect ratio but be no more than 200 pixels wide or 200 pixels high.

I am then displaying the image in an ASP.Net Image control. How do I prevent the images from affecting the surrounding elements? I tried setting the Width property and Height property of the control but that just re-sizes the image itself. Is there maybe a way to wrap the control in a div with a fixed width/height?

Thanks a lot

Answer 1

One way is to resize the image based on aspect ratio, but leave a border in order to fill the 200x200 size. This can then be embedded in the page with the same dimensions without affecting layout.

Alternatively you can just set the overflow property of your surrounding div to hidden, and set the div Width/Height . However it depends how to want this to look. Something like:

<div style="overflow: hidden; width: 200px; height: 200px">
   ...
</div>

If you are actually saying you want an image sized 200px x 400px to display in full - then just set Width to 200px .