Viewport and window contents

Consider a graphics application like a photo viewer (or a movie player).
You can notice that the media (like a photo/movie) will be displayed/positioned in a particular area of the window.
And the controls like buttons, text etc. will be there in the remaining area.

The rectangular area (inside the window) in which we deal with the graphical content is called viewport.

Assume the rectangular area is the viewport.
The viewport's width is 20 letters and height is 5 letters

...
viewport location is changed

...
location and dimensions of the viewport are changed

Here is a flash illustration. The width and height of the viewport are fixed in this example. You can modify the position of the viewport by dragging the sliders in the flash content below.

Different applications will have different requirements. And hence they set the viewport according to the requirements. For example, games will use the entire window area to display the graphics content. Where as image viewers will adjust the viewport, depending on the image and window dimensions.

Media gets resized according to the window size.

Example problem # 1:
If the dimensions of the window and image are 800x600 and 800x400 respectively,
find the corner points (left, top) and (right, bottom) of the image, such that...
(a) The entire image is displayed (as big as possible) in the window.
(b) The image stays at the center of the window.(Ignore the size of borders and other stuff)
(c) The image maintains the same width:height ratio after resizing

Solution:
window_width / image_width = 100%
window_height / image_height = 150%
To display the entire image, we have to set the scale(resizing) to the lesser (of the above) ratio. (why???)
So, the scale is 100%.
Now, since the window's height is 200 pixels more than that of the image,
the image should have a gap of 100 pixels on its top and bottom.
So, the image's corners are given by...
(left, top) = (0, 100)
(right, bottom) = (799, 499)

Example problem # 2:
For the same window(800x600), if the dimensions of the image are 800x1200,
find the two corner points (left, top) and (right, bottom) of the image, such that...
(a) The entire image is displayed (as big as possible) in the window.
(b) The image stays at the center of the window.
(c) The image maintains the same width:height ratio after resizing

Solution:
Since the window is smaller than the image, the image should be scaled down.
To fit the 1200 pixel high image in a 600 pixel high window, the scale should be 50%
So, the resized dimensions of the image will be (400, 600)
This needs 200 pixels of gap on left and right of the image from the window borders.
So, the image's corners are given by...
(left, top) = (200, 0)
(right, bottom) = (599, 599)

Exercise:
If the window dimensions are 640x480 and the dimensions of the image are 1600x900,
find the corner point (left, top) and (resized_width, resized_height) of the image, such that...
(a) The entire image is displayed (as big as possible) in the window.
(b) The image stays at the center of the window.
(c) The image maintains the same width:height ratio after resizing