I am trying to create a responsive design where an image will fit the screen without being cropped in both portrait and landscape mode. I have attempted the following code:
<!doctype html>
<html>
<head>
<style>
img {
max-height:100%;
max-width:100%;
}
</style>
<meta name="viewport" content="initial-scale=1.0" />
</head>
<body>
<center>
<img src = "http://www.terragalleria.com/tmp/square.jpg" />
</center>
</body>
</html>
The image is square. When loaded on an iPhone in portrait orientation, it stretches to fill the width of the screen with space at the bottom, which is what I intended.
However, when the iPhone is rotated to landscape mode, the image stretches to fill the width of the screen and is cropped vertically. Instead, I want the image to stretch to fill the height of the screen with white space on the sides.
Currently, in order to achieve the desired resize upon rotation, the page needs to be reloaded. Is there a way to accomplish this without requiring the user to reload the page?