Add more documentation for sizes=auto#39464
Merged
Conversation
Contributor
|
Preview URLs External URLs (1)URL:
(comment last updated: 2025-05-12 23:59:34) |
yoavweiss
reviewed
May 9, 2025
tunetheweb
commented
May 9, 2025
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Josh-Cena
reviewed
May 9, 2025
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Josh-Cena
reviewed
May 9, 2025
Comment on lines
+31
to
+33
| - `auto` | ||
|
|
||
| - : You can use the value `auto` to replace the whole list of sizes or the first entry in the list. It is only valid when combined with `loading="lazy"`, and resolves to the [concrete size](/en-US/docs/Web/CSS/image) of the image. Since the intrinsic size of the image is not yet known, `width` and `height` attributes (or CSS equivalents) should also be specified to [prevent the browser assuming a default width of 300px](https://html.spec.whatwg.org/multipage/images.html#sizes-attributes:~:text=it%20is%20strongly%20encouraged%20to%20specify%20dimensions%20using%20the%20width%20and%20height%20attributes). |
Member
There was a problem hiding this comment.
Suggestion: do not duplicate information about the precise attribute value syntax. This entire "Value" section could be replaced with something like "A string containing a comma-separated list of source size descriptors. For the exact syntax and description, see the [HTML reference](link)".
(Edit: actually we already do that. If you think it's confusing to mention some syntax but not others, IMO we should just remove everything.)
Contributor
Author
There was a problem hiding this comment.
It's a bit confusing as this page gives a brief summary of the syntax, and then a link. So think it is worthwhile to mention that auto is now supported. However, I cut it down to a single sentence. PTAL.
Josh-Cena
reviewed
May 9, 2025
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
wbamberg
added a commit
to wbamberg/content
that referenced
this pull request
May 21, 2025
* upstream/main: (40 commits) Add a guide on xs-leaks (mdn#38977) chore: Link to child pages in SVG, URI section (mdn#39470) Correct page title for `Uint8Array.prototype.setFromHex()` (mdn#39494) Bump markdownlint-cli2 from 0.17.2 to 0.18.0 (mdn#39488) Add more documentation for sizes=auto (mdn#39464) css(fix): update 'shape()' page (mdn#39454) Expand Compression Dictionary format description (mdn#39441) Add username/password section to URLs guide (mdn#39487) Fix typos (mdn#39481) CSS: mask-position property description (mdn#39449) Adding @starting-style to CSS nesting at-rules (mdn#39473) feat(aria): Add short titles, format titles for roles (mdn#39472) Fix Circle Collision detection algorithm (mdn#39484) Add warning against using element IDs as global properties. (mdn#39422) Fix typos in web audio spatialization basics (mdn#39476) More Error Messages (mdn#39419) Add links to CSS sidebar (mdn#39445) css: add 'stretch' value examples (mdn#39451) chore: link to unlinked child pages (mdn#39469) Fix typos (mdn#39465) ...
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
4 participants
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.
Description
Add
sizes=autodescription to htmlimgageelement doc and add extra note to equivalent<img>doc (where it is documented already).Motivation
New feature that is underdocumented.
Additional details
https://chromestatus.com/feature/5191555708616704
https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/
Related issues and pull requests
Was added to BCD in: mdn/browser-compat-data#23785
Was also partially added in #38025
Fixes #30596