Re: [csswg-drafts] [css-grid][css-sizing] Aspect Ratio

> This specific example of ew unit confuses me.

It's code from an actual project, and it works 😀

The more typical element query would look like this, for example:

```
@element .page and (max-width: 422px) {
  /* Inside this block, the element-width unit "ew" is based on the .page element. */
}
```

> Are you setting the img to 30% of the width of the .page element?

Yep, that's what this EQCSS-powered code does.

> So the img ew unit comes from the parents width?

It comes from the .page element, which could be the parent of the image element, but it could also be a far higher ancestor for example.

The docs are at https://elementqueries.com/ -> "ew (element width)"  "EW Units",
and (with more info) at https://tomhodgins.github.io/element-queries-spec/element-queries.html#ew .

Some more instances of "ew" units in use:
https://tobireif.com/demos/grid/view_demo_source/
-> search-in-page for all "ew;" .

> Regardless, I'd be more interested in a property or method [aspect-ratio specific]

Having property (or set of properties) specifically for aspect-ratio would be great!

The "ew" unit is a fundamental part of element queries / container queries, and it could also be used for ensuring any aspect ratio:

```
@element #foo {
  #foo {
    height: 100ew;
  }
}
```

... but having one or more properties specifically for aspect-ratio would be even better (and I hope we'll get native element queries including element-width units in any case).

-- 
GitHub Notification of comment by tobireif
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/333#issuecomment-399891259 using your GitHub account

Received on Monday, 25 June 2018 09:33:32 UTC