CODEWITHSUNDEEP
javascriptjqueryhtmlcss
FlyingCat
FlyingCat

Reputation: 14290

How to restrain the image size in a div

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!!!

Upvotes: 0

Views: 1349

Answers (3)

Stieffers
Stieffers

Reputation: 752

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/

Upvotes: 2

OneChillDude
OneChillDude

Reputation: 8006

Constrain it with a max-height, or a max-width.

Upvotes: 1

alf
alf

Reputation: 18550

Use the CSS max-width property on the div.

Something like this should work:

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

Upvotes: 2

Related Questions