Using CSS to make image size 100% to height of container
I have looked around reading solution after solution and trying all kinds
of things but never getting this to work right...
I want the image to end up being dynamically resized based on the current
height of the browser window. Currently using the code below the image is
the original height and ends up being LARGER than the browser window
causing a vertical scrollbar to appear.
Note: Please keep in mind I want this accomplished using the same amount
of of tables and cells. Please do not give me a single table solution.
Thanks!
<html>
<head>
<style>
body
{
text-align: center;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
table.one
{
border-collapse: collapse;
}
table.two
{
border-collapse: collapse;
}
img
{
max-height: 100%;
}
</style>
</head>
<body>
<table class="one" cellpadding=0>
<tr>
<td>
<table class="two" cellpadding=0>
<tr>
<td>
<img src="myimage.jpg">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment