Using CSS to make image size 100% to height of container
css, html, html-table
Solution
You can use viewport units to resize based on the size of the browser window.
img {
max-height: 100vh;
}
Problem
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. ``` <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> ```