CODEWITHSUNDEEP
htmlcssimage
Davey
Davey

Reputation: 1324

Auto sizing images within a div

So I'm building this custom admin panel for users to easily build out there own web site data into a collection of templates. The main problem I am running in to is dealing with images. There is a div on one template that is 380px by 150px. My question is:

Is there a way to auto resize an image to fit in the div and to also not have it stretch or clip? I am open to all solutions but if it works in IE that would be awesome. Thanks in advance.

Upvotes: 0

Views: 139

Answers (2)

Mike Vysocka
Mike Vysocka

Reputation: 194

You could use jQuery to accomplish this. If the images are being added dynamically (on the fly), you could leverage .live() ...

$('.someDivClass').children('img').live(function(){

var desiredWidth = /* your own logic here */;
$(this).width(desiredWidth);

});

Alternatively, you could just target the height of the image as well (or both).

Upvotes: 0

darma
darma

Reputation: 4747

Yes that would be :

#your_div.div{
    width:380px;
    height:150px;
}
#your_div img{
    max-width:100%;
    max-height:100%;
}

The image may be resized but not distorted, and you may also have some "blank" space left somewhere but that's logically expected.

Upvotes: 3

Related Questions