PathMX

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.

A towering blue wave curls over three boats, with a small snow-capped Mount Fuji in the distance

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.

A towering blue wave curls over boats, framing a small Mount Fuji

The Great Wave A small, still triangle beneath a moving sea.

Mount Fuji fills the print, with clouds beside its summit and red lightning across its dark lower slope

Shower Below the Summit The mountain fills the frame; lightning cuts across its base.

Travelers cross a blue river in the foreground, while Mount Fuji rises beyond striped hills

Fuji from Kanaya A 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.

<div data-pmx-gallery class="print-gallery">

<figure>

![A wave curls over boats, framing Mount Fuji](./images/great-wave.jpg)

<figcaption>The Great Wave</figcaption>
</figure>

<figure>

![Lightning crosses the dark slope of Mount Fuji](./images/shower-below-summit.jpg)

<figcaption>Shower Below the Summit</figcaption>
</figure>

<figure>

![Travelers cross a river below distant Mount Fuji](./images/fuji-from-kanaya.jpg)

<figcaption>Fuji from Kanaya</figcaption>
</figure>

</div>

.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.

The complete Great Wave print, with both the large wave and distant Mount Fuji visible

Keep the composition fit=contain

Curling water and boats in Hokusai’s Great Wave

Follow the wave fit=cover position=left

Mount Fuji and boats beneath the wave in Hokusai’s Great Wave

Find the mountain fit=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 
![@image(width=220 ar="3/4" fit=contain).lightbox The complete print](./images/great-wave.jpg)

![@image(width=220 ar="3/4" fit=cover position=left).lightbox The wave](./images/great-wave.jpg)

![@image(width=220 ar="3/4" fit=cover position=right).lightbox The mountain](./images/great-wave.jpg)

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.

View source

Image authoring reference

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.

Museum image-use information.