Pictures
The page header and the Golden-Mantled Ground Squirrel picture fit on a 768 pixel high display with this line.
The Yellow-Bellied Marmot picture fits on a 768 pixel high display with this line.
The picture of both animals fits on a 768 pixel high display but typically this line does not fit with the picture.
Display pictures as a percent of the working area's width.
Specify pictures as a percent width of the container's width. This has the advantage of resizing the image so that it always fits horizontally in the display on displays less than 1024 pixels wide.
Initially display images at or near the actual display resolution.
Create and initially display a reduced resolution image if the original is significantly higher resolution than the display resolution. The reduced resolution image typically has a smaller file size for faster initial load.
This reduced resolution image has the advantage of being directly supported by Insert Image in Amaya. Images with 3000 or more pixel width do not display successfully in Amaya with container width significantly smaller. As an example directly inserting the full resolution image Yellow-bellied_marmot_and_Golden-mantled_ground_squirrel.JPG (3648 wide by 2736 high). It does not work in Amaya but it does work in modern browsers.
Make the image a link to the full resolution image.
Make the displayed image a link to the full resolution image. Typically browsers open a new page just showing this image. Clicking on this image again provides the full resolution image which requires scrolling around to see all of it.
Page width
The page width used by the .css files is 960 pixels between the vertical lines. There is an additional padding of 20 pixels on each side of the text and pictures. This leaves 920 pixels as the 100% width for a picture. A 50% width picture is 460 pixels wide. The squirrel picture at the top of the page is displayed at 40% width which is 368 pixels in the 920 pixel working width.
Manually sized with width percentage
These manually sized images using a width percentage of the display working width is appropriate for smaller images. The first image on this page is an example where it is sized to fit with the whole page header on a 768 pixel high display.
Additional pictures resize approach for large images
See the pictures resize page for an additional way to display images which is appropriate for large images you want to automatically resize to fit on the display. Those images are bound either vertically or horizontally depending on whether they are portrait or landscape oriented pictures.