-
Notifications
You must be signed in to change notification settings - Fork 22.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New CSS guide: Understanding aspect ratio #33461
Conversation
Preview URLs (comment last updated: 2024-05-15 22:29:33) |
Thanks for the review @dipikabh |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Review of the remaining sections
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
@dipikabh Thanks for the review. Looks like we're close to there. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the updates, @estelle. A few last things..
|
||
### Creating a circle based on the container size | ||
|
||
The inline-size of non-replaced block-level elements is the size of their container's [content box](/en-US/docs/Web/CSS/box-edge#content-box). Because they have an size by default, they don't need to have an explicit size set for the `aspect-ratio` property to work. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"an size" in "Because they have an size by default" remains to be fixed
|
||
## See also | ||
|
||
- [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we add this link https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia#rendering_strategy_preventing_jank_when_loading_images here as "How to prevent jank when loading images" (it is currently only linked via the term "jank" on the page)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's only tangential, so i think that reference is enough. I'll be adding CLS content in a few weeks, so will link that instead when it's published.
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for addressing the feedback, @estelle. Approving!
There's a lint error, feel free to merge after resolving it.
…index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
links to this new guide will be created in a separate PR.
(I've been having issues with git, so this is the 3rd attempt at this PR. Sorry for the spam)
Note the images are not loading in the preview. The iframes for the preview are on https://live.mdnyalp.dev/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio/runner.html?id=original but the image is on https://pr33461.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio
Fixes openwebdocs/project#201