Question

I am trying to restrain the varies image widht and height inside a div.

The images have different size and I want to reduce the image size while maintaining it’s ratio if it’s oversize.

 $('#Div').css({display:'block',
                     position: 'absolute',
                     top: offset.top,
                     left:offset.left
                     }).append("<img src='" + largePic+ "'/>");

The largePic is the large image path and I can’t tell how big the image is until it loads.

Any idea how to do this? Thanks a lot!!!

Answer 1

You can constrain the image by way of the div, or the image. Here’s a jsfiddle of constraining the image by setting a width on the div, and having the image fill the div as best possible: http://jsfiddle.net/LELns/