Showing the entire portrait document

Explore a small example

This isolated example explains the structure. The article records what has actually been verified.

First I ask whether the picture carries information or atmosphere

A hero photograph can sometimes lose an edge without losing its purpose. Cover can serve that choice. A drawing, map, price table or instruction sheet can carry essential meaning at its edges: room names, a legend, units or conditions. Applying the same fill rule can silently remove them.

I therefore recorded the material type alongside the file. Information images defaulted to contain, and the release build rejected a document configured for cover cropping. This was a rule about preserving the scope of the information, not simply a preference between two CSS values.

Showing the whole image and making it readable are separate checks

Contain is not the end of the decision. A long drawing placed inside a short box can remain intact while becoming too small to read. I distinguish seeing the entire sheet from inspecting its detail. A mobile reader may need a way to enlarge the material or inspect an authorized original.

A document does not have to inherit a photographic card’s proportions. In a document area, its intrinsic ratio can remain intact and the height can grow naturally. A slide preview may instead need a bounded height. When I choose that bound, I also check how much it reduces the size of the information. Visibility and readability are different requirements.

The correction involved the image and its surroundings

The implementation removes the fixed ratio and height from the full-document area and lets the picture retain its ratio. The home slide uses a separately bounded box with contain. These locations have different roles, so I did not force them to share one universal height.

Overlap can come from more than the picture itself. A fixed wrapper height, absolute positioning, transition behavior and the dimensions of inactive slides can interact. I checked whether the top and bottom of the drawing were visible separately from whether the next slide showed through. The same distinction can help with explanatory cards and specification sheets.

A basic structure you can reuse independently

The following example removes the client drawing and project-specific classes. It shows a document area that grows naturally and a preview whose height is constrained. Its dimensions and spacing should be adapted to the material and the actual reading environment.

If an implementation links an original document, its usage rights and disclosure scope need to be checked first. Converting a restricted document into an image does not make it public. This example contains no external address or another site’s material.

<figure class="document-sheet">
  <img src="/media/document-image.svg"
       alt="A drawing explaining the content" width="600" height="1000">
  <figcaption>Inspect the complete document first.</figcaption>
</figure>

<style>
.document-sheet { margin: 0; min-width: 0; }
.document-sheet img {
  display: block; width: 100%; height: auto;
  object-fit: contain;
}
.document-preview {
  display: grid; place-items: center; min-width: 0;
  height: clamp(260px, 52vh, 580px);
}
.document-preview img {
  width: 100%; height: 100%; object-fit: contain;
}
</style>

What code can reject and what still needs a screen check

While preparing this article, I reran the relevant check that rejects cover cropping for a document, and it passed. The historical review records the top and bottom of the portrait drawing, the corrected desktop slide overlap, maintained mobile proportions and a horizontal overflow check. That describes the material and screens reviewed at the time; it does not guarantee readability for every tall image.

The newly written example still needs rendered and keyboard-flow checks in its target environment. Rejecting a cropping configuration is different from establishing that a reader can understand the small print. I look at detail size, the route back after enlargement and the material that remains visible after switching a tab.

1. Are the necessary details retained at all four edges?
2. Has fitting the image made its smaller notes unreadable?
3. Does the mobile page avoid being pushed wider?
4. Does another slide or hidden picture overlap the current material?
5. Do its title, alternative description and surrounding text still communicate the purpose?

I do not treat empty space as a failure

Displaying a tall drawing in full can leave space on either side. I preferred preserving its purpose to cropping it merely to remove that space. If the composition feels awkward, I can adjust the explanatory text or the height of the surrounding area. Removing necessary information is a different kind of change.

Keeping information images and atmospheric photographs under different rules can prevent a great deal of confusion. I want to leave material a customer can inspect completely, rather than a single attractive frame that loses part of its meaning.