Skip to content

Commit e9d5f56

Browse files
committed
[css-sizing-4] Define term 'preferred aspect ratio'
1 parent 4f73060 commit e9d5f56

1 file changed

Lines changed: 10 additions & 8 deletions

File tree

css-sizing-4/Overview.bs

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,29 +78,31 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
7878
Computed value: specified keyword or a pair of numbers
7979
</pre>
8080

81-
This property sets an intrinsic aspect ratio for the box,
81+
This property sets a <dfn export>preferred aspect ratio</dfn> for the box,
8282
which will be used in the calculation of ''height/auto'' sizes
8383
and some other layout functions.
84-
The box will essentially size the same as a <a>replaced element</a>
85-
with an <a>intrinsic aspect ratio</a>,
86-
see e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2&sect;10</a>.
84+
The box’s <a>automatic sizes</a>
85+
are then calculated the same as for
86+
a <a>replaced element</a> with an <a>intrinsic aspect ratio</a>,
87+
see <a href="https://www.w3.org/TR/CSS2/visudet.html">CSS2&sect;10</a>.
8788

8889
<dl dfn-for="aspect-ratio" dfn-type="value">
8990
<dt><dfn>auto</dfn>
9091
<dd>
9192
<a>Replaced elements</a> with an <a>intrinsic aspect ratio</a>
9293
use that aspect ratio;
93-
otherwise the box has no aspect ratio.
94+
otherwise the box has no <a>preferred aspect ratio</a>.
9495

9596
<dt><dfn><<ratio>></dfn>
9697
<dd>
97-
The box’s aspect ratio is the specified ratio.
98+
The box’s <a>preferred aspect ratio</a> is the specified ratio
99+
of ''<var>width</var> / <var>height</var>''.
98100
</dl>
99101

100102
Note: If a box has both a specified 'width' and a specified 'height',
101-
then the aspect ratio has no effect:
103+
then the <a>preferred aspect ratio</a> has no effect:
102104
at least one of these sizes must be ''width/auto''
103-
for the aspect ratio to have an impact on sizing.
105+
for the <dfn>preferred aspect ratio</a> to have an impact on sizing.
104106
105107
<div class="example">
106108
This example sets each item in the grid to render as a square,

0 commit comments

Comments
 (0)