Is there a simple way to make images fill 100% of the height of a div?
If you want to place images inside divs where the images fill 100% of the height of the div, use the following CSS:
.container{
height:100%;
float:left;
}
img {
height:100%;
}
For the HTML code, you can do it like this:
<div class="container">
<img src="xyz.jpg" />
</div>
However, when viewed in non-webkit browsers, you may notice a large amount of whitespace to the right of the image within the div. To fix this, ensure that the div's width shrinks to that of the image if you plan on lining up multiple divs in a row using float.
You can see an example here: http://jsfiddle.net/osnoz/VzrnT/