Skip to content

Commit 0285e6d

Browse files
committed
Fix some inconsistencies in 'object-fit's definition, and reduce changes from LC, and reduce excessive indirection in the definition of its values. We want authors to have *some* chance of making sense of all this.
1 parent bf2cb2b commit 0285e6d

2 files changed

Lines changed: 42 additions & 29 deletions

File tree

css3-images/Overview.html

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2029,37 +2029,38 @@ <h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
20292029
<p>The &lsquo;<a href="#object-fit0"><code
20302030
class=property>object-fit</code></a>&rsquo; property specifies how the
20312031
contents of a replaced element should be scaled relative to the box
2032-
established by its used height and width. It also enables scaling a
2033-
replaced element up to a specified maximum size or down to a specified
2034-
minimum size while preserving its aspect ratio.
2035-
2036-
<p>Not all replaced elements can be scaled, but images typically can.
2037-
2038-
<p>If the replaced element's content does not have an <a
2039-
href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, all of
2040-
the values for &lsquo;<a href="#object-fit0"><code
2041-
class=property>object-fit</code></a>&rsquo; are treated as &lsquo;<code
2042-
class=css>fill</code>&rsquo;.
2032+
established by its used height and width. Not all replaced elements can be
2033+
scaled, but images typically can.
20432034

20442035
<dl>
20452036
<dt>&lsquo;<code class=css>fill</code>&rsquo;
20462037

2047-
<dd>The object's <a href="#specified-size"><i>specified size</i></a> is
2048-
the element's used width and height.
2038+
<dd>The object's <a href="#concrete-object-size"><i>concrete object
2039+
size</i></a> is the element's used width and height.
20492040

20502041
<dt>&lsquo;<code class=css>contain</code>&rsquo;
20512042

2052-
<dd>The object's <a href="#specified-size"><i>specified size</i></a> is a
2053-
"contain" constraint.
2043+
<dd>The object's <a href="#concrete-object-size"><i>concrete object
2044+
size</i></a> is the largest rectangle that has the object's <a
2045+
href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, and
2046+
additionally has neither width nor height larger than the replaced
2047+
element's used width and height, respectively.
20542048

20552049
<dt>&lsquo;<code class=css>cover</code>&rsquo;
20562050

2057-
<dd>The object's <a href="#specified-size"><i>specified size</i></a> is a
2058-
"cover" constraint.
2051+
<dd>The object's <a href="#concrete-object-size"><i>concrete object
2052+
size</i></a> the smallest rectangle that has the object's <a
2053+
href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, and
2054+
additionally has neither width nor height smaller than the replaced
2055+
element's used width and height, respectively.
20592056

20602057
<dt>&lsquo;<code class=css>none</code>&rsquo;
20612058

2062-
<dd>The object has no <a href="#specified-size"><i>specified size</i></a>.
2059+
<dd>Determine the object's <a href="#concrete-object-size"><i>concrete
2060+
object size</i></a> using the <a
2061+
href="#default-sizing-algorithm"><i>default sizing algorithm</i></a> with
2062+
no specified size, and a <a href="#default-object-size"><i>default object
2063+
size</i></a> equal to the replaced element's used width and height.
20632064

20642065
<dt>&lsquo;<code class=css>scale-down</code>&rsquo;
20652066

@@ -2074,6 +2075,12 @@ <h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
20742075
intrinsic aspect ratio, so the concept of "smaller" is well-defined.</p>
20752076
</dl>
20762077

2078+
<p>If the replaced element's content does not have an <a
2079+
href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, the
2080+
&lsquo;<code class=css>cover</code>&rsquo; and &lsquo;<code
2081+
class=css>contain</code>&rsquo; values are treated as &lsquo;<code
2082+
class=css>fill</code>&rsquo;.
2083+
20772084
<p>If the content does not completely fill the replaced element's content
20782085
box, the unfilled space shows the replaced element's background. Since
20792086
replaced elements always clip their contents to the content box, the

css3-images/Overview.src.html

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1226,26 +1226,29 @@ <h3 id="object-fit">
12261226

12271227
<p>The 'object-fit' property specifies how the contents of a replaced element
12281228
should be scaled relative to the box established by its used height and width.
1229-
It also enables scaling a replaced element up to a specified maximum size
1230-
or down to a specified minimum size while preserving its aspect ratio.</p>
1231-
1232-
<p>Not all replaced elements can be scaled, but images typically can.</p>
1233-
1234-
<p>If the replaced element's content does not have an <i>intrinsic aspect
1235-
ratio</i>, all of the values for 'object-fit' are treated as ''fill''.</p>
1229+
Not all replaced elements can be scaled, but images typically can.</p>
12361230

12371231
<dl>
12381232
<dt>''fill''</dt>
1239-
<dd>The object's <i>specified size</i> is the element's used width and height.</dd>
1233+
<dd>The object's <i>concrete object size</i> is the element's used width and height.</dd>
12401234

12411235
<dt>''contain''</dt>
1242-
<dd>The object's <i>specified size</i> is a "contain" constraint.</dd>
1236+
<dd>The object's <i>concrete object size</i> is the largest rectangle that
1237+
has the object's <i>intrinsic aspect ratio</i>, and additionally has neither
1238+
width nor height larger than the replaced element's used width and height,
1239+
respectively.</dd>
12431240

12441241
<dt>''cover''</dt>
1245-
<dd>The object's <i>specified size</i> is a "cover" constraint.</dd>
1242+
<dd>The object's <i>concrete object size</i> the smallest rectangle that
1243+
has the object's <i>intrinsic aspect ratio</i>, and additionally has neither
1244+
width nor height smaller than the replaced element's used width and height,
1245+
respectively.</dd>
12461246

12471247
<dt>''none''</dt>
1248-
<dd>The object has no <i>specified size</i>.</dd>
1248+
<dd>Determine the object's <i>concrete object size</i> using the
1249+
<i>default sizing algorithm</i> with no specified size, and a
1250+
<i>default object size</i> equal to the replaced element's used width and
1251+
height.</dd>
12491252

12501253
<dt>''scale-down''</dt>
12511254
<dd>
@@ -1257,6 +1260,9 @@ <h3 id="object-fit">
12571260
</dd>
12581261
</dl>
12591262

1263+
<p>If the replaced element's content does not have an <i>intrinsic aspect
1264+
ratio</i>, the ''cover'' and ''contain'' values are treated as ''fill''.</p>
1265+
12601266
<p>If the content does not completely fill the replaced element's content box,
12611267
the unfilled space shows the replaced element's background.
12621268
Since replaced elements always clip their contents to the content box, the

0 commit comments

Comments
 (0)