HTML image scaling

Question

I need to display a bunch of images on a page. Images are of different sizes, some are very wide and very thin. I want to put them in a container with a fixed width and a fixed height.

Say if the image is smaller, we save the size and place it in the center of the container. if the image is larger, we scale it according to the visible direction.

Our container is 500x500, and the image say 1000x400, then it will scale as 500x200. Similarly, if the image is 400x1000, then the scaled image is 200x500. This can only be done using html / css. Any help is appreciated. Thank.

Answer 1

You can use properties max-widthand max-heightCSS to get the desired effect:

#container img {
    max-width:500px;
    max-height:500px:
}

Remember that this does not work in IE6. To make it work, you may need to either scale the image server or use expressions that are unpleasant. There are other workarounds you can find on google :)

Answer 2

When resizing images on the server, you will get much better results. Resizing in the browser means that the client downloads much larger files than necessary, and the quality of resizing is not very high.

Answer 3

. htm css.

img{ width: 100% }

1000x400, 500x200 bu 400x1000 500x1200.

javascrpt, :

function scaleimage(id)
{
    var image = document.getElementById(id);
    if(image.offsetWidth > image.offsetHeight)
    {
         if(image.offsetWidth > 500)
         {
             image.offsetHeight = image.offsetHeight * 500 / image.offsetWidth;
             image.offsetWidth = 500;
         }
     }
     else
     {
         if(image.offsetHeight > 500)
         {
             image.offsetWidth = image.offsetWidth * 500 / image.offsetHeiht;
             image.offsetHeight = 500;
          }
    }
}  

, , iPhone .

Answer 4

The best way to do this is on the server. Or manually before downloading (if possible).

Answer 5

You can use CSS properties and CSS widths to get the desired effect:

img container {

width:500px;
height:500px:

}

Remember that this works in all browsers.

Thanks Ptiwari.