Resizing image to fit its container
- by jack moore
#foo {width: 300px; height: 400px; overflow: hidden;}
<div id="foo"></div>
this.someimage = randomImageUrl;
$("foo").innerHTML = "<img src='"+this.someimage+"' class='fooimage' />";
Now, the picture could be 200x200 or 1100x400 ... it's totally random. I can just stretch it (or reduce its size) by using:
.fooimage {width: 300px; height: 400px;}
$("foo").innerHTML = "<img src='"+this.someimage+"' class='fooimage' />";
Or I could test its size:
imgHeight = newImg.height;
imgWidth = newImg.width;
... and maybe something like this:
if(imgHeight >400){
$("foo").innerHTML = "<img src='"+this.someimage+"' height='400' />";
}
and browsers will do the rest.
But there must be something better. Any ideas? Thanks! :)
