fix(blog): pin blog-layout: list thumbnail to a fixed aspect ratio - #17
Closed
devalog wants to merge 1 commit into
Closed
fix(blog): pin blog-layout: list thumbnail to a fixed aspect ratio#17devalog wants to merge 1 commit into
devalog wants to merge 1 commit into
Conversation
blog-layout: list sizes the row thumbnail as `height: 100%` of the row with `aspect-ratio: auto`. Row height is set by the text column next to it, so anything that changes line-wrapping (window width, browser zoom, even a longer title) changes the image box's shape, and object-fit: cover crops more or less of the photo accordingly — most noticeably, zooming in narrows the text column, wraps it onto more lines, grows the row, and squeezes the image into a taller/narrower box. Override the thumbnail with a fixed aspect-ratio via a small stylesheet (same `css:` mechanism docs-starter uses) so the crop stays consistent regardless of viewport width or zoom level. Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #16: the merged example's blog cards look increasingly cropped as you zoom the browser in, going back to normal when you zoom out.
Cause:
blog-layout: list's row thumbnail is styledheight: 100%of the row withaspect-ratio: auto(not a fixed ratio). Row height is set by the tallest sibling — the text column. Zooming in narrows the effective viewport, which narrows the text column, which wraps the title/excerpt onto more lines, which grows the row — and the image box grows with it, getting taller/narrower relative to its 40%-of-row width. Same photo,object-fit: cover, now squeezed into a different box shape, so more of it gets cropped. This is a platform CSS behavior, independent of the thumbnail URLs/crop params from #16.Fix: a small
styles.css, wired viacss: styles.cssindocs.yml(same mechanismdocs-starteruses), pins.fern-blog-card-list .fern-blog-card-imageto a fixed aspect-ratio instead of tracking row height.fern checkpasses.Co-Authored-By: Claude noreply@anthropic.com