Figure

The HTML width and height attributes describe the source asset and help the browser reserve space before it loads. They are not fixed display dimensions when CSS overrides them.

Figure uses width: 100%; height: auto on its media. Once the image is loaded, its natural proportions determine the displayed height at that width. A crop class such as is-square or is-4by3 deliberately chooses a different displayed ratio.

• Scale the whole image: change Figure width. Height follows proportionally.
• Choose a different shape: change the crop ratio. The media cover-crops rather than stretches.
• Match adjacent content: use is-fill in a layout that supplies height.
• Need an exact display height? set CSS height on the image, not its HTML height attribute.

<figure class="figure story-portrait">
  <img src="portrait.webp" width="800" height="500" alt="…">
</figure>

/* Your site CSS. story-portrait is your own class, not an Artist modifier. */
.figure.story-portrait > img {
  height: 800px;
  object-fit: cover;
}
@media (max-width: 800px) {
  .figure.story-portrait > img { height: auto; }
}

Use the asset’s real dimensions in the HTML. Scroll-Story copies the authored Figure classes and attributes into its visual display; its private sticky-position measurements are generated by JavaScript and are not sizing controls.