Skip to content

Screenshots keep their proportions - #6

Merged
lana-20 merged 1 commit into
mainfrom
screenshot-proportions
Oct 6, 2026
Merged

lana-20 merged 1 commit into
mainfrom
screenshot-proportions

Conversation

@lana-20

@lana-20 lana-20 commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Phone screenshots were drawn squashed toward square: a 360×800 shot at 358×518. Docusaurus writes each image's own width and height on the tag, and .markdown img had only a max-height, so the height was capped while the width attribute held.

width: auto; height: auto; max-width: 100% beside the cap scales each image as a whole.

Measured in headless Chrome, every image's drawn aspect against its own:

  • the live site: 552 of 762 images out of proportion by more than 2%;
  • this branch's build, on a 40-page sample including reference/cli/accessibility and reference/cli/alert: 0 of 72, where the live site had 72 of 72.

Docusaurus writes each image's own width and height on the tag, and the
max-height on .markdown img held the height down while the width attribute
held, so a 360x800 phone screenshot was drawn 358x518 — squashed toward
square. width and height auto scale it as a whole.
@lana-20
lana-20 force-pushed the screenshot-proportions branch from e02a351 to d6ec10d Compare October 6, 2026 01:23
@lana-20
lana-20 merged commit 8224612 into main Oct 6, 2026
2 checks passed
@lana-20
lana-20 deleted the screenshot-proportions branch October 6, 2026 01:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant