abedlamgreyxx
New Member
Consider the following code. How can I implement the table in a responsive manner such that on a large screen the table height and width is equal to the sum if the images (e.g. 600x600) and on a smaller screen such as a mobile device the table shrinks the images proportionally. For example, on an iPhone where the screen width is 320 pixels I want the table to scale down to 320x320 while preserving the image aspect ratio.\[code\]<HTML><head></head><body> <div id="header"></div> <div id="table" <table style="height: 100%"> <tr> <td> <img id="topleft" src="http://stackoverflow.com/questions/14568809/300x300.png"> </td> <td> <img id="topright" src="http://stackoverflow.com/questions/14568809/300x300.png"> </td> </tr> <tr> <td> <img id="bottomleft" src="http://stackoverflow.com/questions/14568809/300x300.png"> </td> <td> <img id="bottomright" src="http://stackoverflow.com/questions/14568809/300x300.png"> </td> </tr> </table></div><div id="footer"></div></body></html>\[/code\]Here's an image showing how the above code renders in a mobile Safari browser.
