---
title: One mountain, three points of view
description: Look closely at three Hokusai prints. A small lesson in composition, made with images, captions, and a gallery.
image: ./images/great-wave.jpg
---
[@styles]: ./images/gallery.css
[@source-links]: ./example.components.md
# One mountain, three points of view
A mountain can dominate a picture or almost disappear inside it. In these three
woodblock prints, Katsushika Hokusai gives Mount Fuji a different place in the
frame. Look for the mountain first. Then notice where your eye goes next.
The Great Wave · Katsushika Hokusai, 1830–33
The wave catches your attention; the mountain waits beneath its curve. Open the
print and zoom in to follow the outlines of the boats and the foam.
---
## The same subject, a different balance
Open any print to move through the gallery. Compare the size of the mountain,
the shape of the sky, and the activity in the foreground.
The Great WaveA small, still triangle beneath a moving sea.
Shower Below the SummitThe mountain fills the frame; lightning cuts across its base.
Fuji from KanayaA distant landmark above a busy river crossing.
**Look again:** which print makes the mountain feel largest? Is it only the
amount of space it occupies, or do the surrounding shapes help?
See the gallery markup
A `data-pmx-gallery` wrapper groups ordinary images in authored order. Each
`figcaption` follows its image into the viewer. CSS supplies the grid.
```md
The Great Wave
Shower Below the Summit
Fuji from Kanaya
```
```css
.print-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
gap: 1.5rem;
}
.print-gallery figure { margin: 0; }
```
This page also uses `ar="3/2" fit=contain` to align the previews and `sizes` to
describe their grid slots. Those are presentation choices; the wrapper alone
provides gallery behavior.
---
## A crop changes the story
These three frames use the same file. The first keeps the complete print inside
a portrait-shaped box. The others fill that box and choose which edge to keep.
Keep the compositionfit=contain
Follow the wavefit=cover position=left
Find the mountainfit=cover position=right
Open any frame: the viewer restores the complete composition. The crop belongs
to the image's presentation on this page; the original stays intact.
See the crop markup
```md
```
`width` sets the display width; `ar` sets the box's aspect ratio. `fit` decides
whether to contain or crop, and `position` decides which part stays in view.
`.lightbox` adds full-size inspection to a standalone image.
---
## Try a different frame
Choose a print and imagine it as the cover of a small exhibition booklet. Which
detail would you keep? Which would you be willing to lose?
Change a `position` or `ar` value in this page's source, then open the result to
compare it with the full print. You can also follow this lesson in Focus or Slides;
opening a print keeps your place in the lesson.
[Image authoring reference](../docs/authoring/images.reference.md)
---
## About the prints
All three works are by Katsushika Hokusai, from *Thirty-Six Views of Mount Fuji*.
The images are public-domain reproductions from the Art Institute of Chicago's
Clarence Buckingham Collection, saved locally so this example also demonstrates
automatic responsive image generation.
- [The Great Wave](https://www.artic.edu/artworks/24645), 1830–33.
- [Shower Below the Summit](https://www.artic.edu/artworks/87008), about 1830–33.
- [Fuji from Kanaya on the Tokaido](https://www.artic.edu/artworks/23719), about 1830–32.
[Museum image-use information](https://www.artic.edu/open-access/open-access-images).