am designing a web app, and the app will be used on mainly mobile devices. I want the whole image to stay inside the screen matter the dimensions of the image. Example:
I have an image that is 200px by 1000px. It is displayed in the center of an iPhone screen, and the image is a bar in the center of the screen 200px in height. There are huge margins on the top and bottom of the screen. Then if the image is flipped 90deg, there is an image displayed as a bar 200px wide from top to bottom, while having margins on the left and right side of the screen.
How can I accomplish this? Any help is greatly appreciated!