Reputation: 1324
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
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
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