Skip to content

Commit 2e844a3

Browse files
tabatkinstabatkins
committed
Rewrote the object-fit section to better hook into the sizing algorithm.
Added a note to object-fit about its effects on SVG sizing.
1 parent 58ba894 commit 2e844a3

2 files changed

Lines changed: 99 additions & 97 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 55 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515

1616
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
1717

18-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 February
19-
2011</h2>
18+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 7 March 2011</h2>
2019

2120
<dl>
2221
<dt>Latest Version:
@@ -1415,83 +1414,69 @@ <h3 id=object-fit><span class=secno>6.4. </span> Sizing Objects: The
14151414
contents of a replaced element should be scaled relative to the box
14161415
established by its used height and width. It also enables scaling a
14171416
replaced element's contents up to a specified maximum size or down to a
1418-
specified minimum size while preserving its aspect ratio.
1417+
specified minimum size while preserving its aspect ratio. This property
1418+
never affects the size of the replaced element; it only affects the size
1419+
of the contents of the replaced element.
14191420

14201421
<p>Not all replaced elements can be scaled, but images typically can.
14211422

1422-
<p>The contents of a replaced element with an intrinsic aspect ratio (which
1423-
may be derived from intrinsic dimensions) are scaled as follows:
1423+
<p>If the replaced element's content do not have an intrinsic aspect ratio
1424+
(which may be derived from an intrinsic width and height), all of the
1425+
values for &lsquo;<a href="#object-fit0"><code
1426+
class=property>object-fit</code></a>&rsquo; are treated as &lsquo;<code
1427+
class=css>fill</code>&rsquo;. Otherwise, the contents are scaled as
1428+
follows:
14241429

14251430
<dl>
14261431
<dt>fill
14271432

14281433
<dd>
1429-
<p>Determine the used &lsquo;<code class=property>height</code>&rsquo;
1430-
and &lsquo;<code class=property>width</code>&rsquo; <a
1431-
href="/TR/CSS21/visudet.html">as usual</a>. Scale the content height and
1432-
width independently so that the edges of the content just meet the edges
1433-
of the box established by the used &lsquo;<code
1434-
class=property>height</code>&rsquo; and &lsquo;<code
1435-
class=property>width</code>&rsquo;.</p>
1434+
<p>Set the content's size to the <a
1435+
href="#concrete-object-size"><i>concrete object size</i></a> obtained by
1436+
running the <i title=default-sizing>object sizing algorithm</i> with a
1437+
<a href="#specified-size"><i>specified size</i></a> and a <a
1438+
href="#default-object-size"><i>default object size</i></a> equal to the
1439+
replaced element's used width and height.</p>
1440+
1441+
<p>This will make the contents exactly fill the replaced element.</p>
14361442

14371443
<dt>contain
14381444

14391445
<dd>
1440-
<p>Determine the used &lsquo;<code class=property>height</code>&rsquo;
1441-
and &lsquo;<code class=property>width</code>&rsquo; <a
1442-
href="/TR/CSS21/visudet.html">as usual</a>, except if both &lsquo;<code
1443-
class=property>height</code>&rsquo; and &lsquo;<code
1444-
class=property>width</code>&rsquo; are &lsquo;<code
1445-
class=css>auto</code>&rsquo;, and the used value of at least one of
1446-
&lsquo;<code class=property>max-width</code>&rsquo; and &lsquo;<code
1447-
class=property>max-height</code>&rsquo; is not &lsquo;<code
1448-
class=property>none</code>&rsquo;, then compute the element's used width
1449-
and used height as though the intrinsic dimensions of the contents were
1450-
infinitely large numbers whose ratio is the actual intrinsic ratio of
1451-
the contents.</p>
1452-
1453-
<p>Scale the contents of the element, preserving their aspect ratio, to
1454-
the largest size such that the width of the contents is less than or
1455-
equal to the used width of the box and the height of the contents is
1456-
less than or equal to the used height of the box.</p>
1446+
<p>Set the content's size to the largest width and height that has the
1447+
same aspect ratio as the content's intrinsic aspect ratio, and
1448+
additionally has neither width nor height larger than the replaced
1449+
element's used width and height, respectively.</p>
14571450

14581451
<dt>cover
14591452

14601453
<dd>
1461-
<p>Determine the used &lsquo;<code class=property>height</code>&rsquo;
1462-
and &lsquo;<code class=property>width</code>&rsquo; <a
1463-
href="/TR/CSS21/visudet.html">as usual</a>, except if both &lsquo;<code
1464-
class=property>height</code>&rsquo; and &lsquo;<code
1465-
class=property>width</code>&rsquo; are &lsquo;<code
1466-
class=css>auto</code>&rsquo;, and the used value of at least one of
1467-
&lsquo;<code class=property>min-width</code>&rsquo; and &lsquo;<code
1468-
class=property>min-height</code>&rsquo; is not &lsquo;<code
1469-
class=css>0</code>&rsquo;, then compute the used width and used height
1470-
of the element as though the intrinsic dimensions of the contents were
1471-
infinitesimally small numbers whose ratio is the actual intrinsic ratio
1472-
of the contents.</p>
1473-
1474-
<p>Scale the contents of the element, preserving their aspect ratio, to
1475-
the smallest size such that the width of the contents is greater than or
1476-
equal to the used width of the box and the height of the contents is
1477-
greater than or equal to the height of the box.</p>
1454+
<p>Set the content's size to the smallest width and height that has the
1455+
same aspect ratio as the content's intrinsic aspect ratio, and
1456+
additionally has neither width nor height smaller than the replaced
1457+
element's used width and height, respectively.</p>
14781458

14791459
<dt>none
14801460

14811461
<dd>
1482-
<p>Determine the used &lsquo;<code class=property>height</code>&rsquo;
1483-
and &lsquo;<code class=property>width</code>&rsquo; <a
1484-
href="/TR/CSS21/visudet.html">as usual</a>. If the content has an
1485-
intrinsic height and width, do not scale it. Otherwise, this value must
1486-
be treated as &lsquo;<code class=css>fill</code>&rsquo;.</p>
1462+
<p>Set the content's size to the <a
1463+
href="#concrete-object-size"><i>concrete object size</i></a> obtained by
1464+
running the <i title=default-sizing>object sizing algorithm</i> with no
1465+
<a href="#specified-size"><i>specified size</i></a>, and a <a
1466+
href="#default-object-size"><i>default object size</i></a> equal to the
1467+
replaced element's used width and height.</p>
14871468

14881469
<dt>scale-down <b class=issue>better name?</b>
14891470

14901471
<dd>
1491-
<p>This value must act identically to &lsquo;<code
1492-
class=css>none</code>&rsquo; or &lsquo;<code
1493-
class=css>contain</code>&rsquo;, whichever would make the contents
1494-
smaller.</p>
1472+
<p>Size the content as if &lsquo;<code class=property>none</code>&rsquo;
1473+
or &lsquo;<code class=property>contain</code>&rsquo; were specified,
1474+
whichever would result in a smaller size.</p>
1475+
1476+
<p class=note>Note that both &lsquo;<code
1477+
class=property>none</code>&rsquo; and &lsquo;<code
1478+
class=property>contain</code>&rsquo; respect the content's intrinsic
1479+
aspect ratio, so the concept of "smaller" is well-defined.</p>
14951480
</dl>
14961481

14971482
<p class=issue>ISSUE: &lsquo;<code class=property>none</code>&rsquo; and
@@ -1500,10 +1485,11 @@ <h3 id=object-fit><span class=secno>6.4. </span> Sizing Objects: The
15001485
is there existing content behavior (perhaps surrounding &lt;object>) that
15011486
requires one of these values?
15021487

1503-
<p>The &lsquo;<code class=property>overflow</code>&rsquo; property
1504-
determines how to render parts of the replaced element's content that
1505-
extend beyond the edges of its box. See the &lsquo;<a
1506-
href="#object-position0"><code
1488+
<p>If the content does not completely fill the replaced element, the
1489+
unfilled space shows the replaced element's background. The &lsquo;<code
1490+
class=property>overflow</code>&rsquo; property determines how to render
1491+
parts of the replaced element's content that extend beyond the edges of
1492+
its box. See the &lsquo;<a href="#object-position0"><code
15071493
class=property>object-position</code></a>&rsquo; property for positioning
15081494
the object with respect to the element's box.
15091495

@@ -1526,6 +1512,16 @@ <h3 id=object-fit><span class=secno>6.4. </span> Sizing Objects: The
15261512
to the fit attribute in <a href="#SMIL10"
15271513
rel=biblioentry>[SMIL10]<!--{{SMIL10}}--></a>.
15281514

1515+
<p class=note>Note: Per the <i title=object-negotiation>CSS⇋Object
1516+
Negotiation</i> algorithm, the <a href="#concrete-object-size"><i>concrete
1517+
object size</i></a> (or, in this case, the size of the content) does not
1518+
directly scale the object itself - it is merely passed to the object as
1519+
information about the size of the visible canvas. How to then draw into
1520+
that size is up to the image format. In particular, raster images always
1521+
scale to the given size, while SVG uses the given size as the size of the
1522+
"SVG Viewport" (a term defined by SVG) and then uses the values of several
1523+
attributes on the root &lt;svg> element to determine how to draw itself.
1524+
15291525
<p>User agents MAY accept &lsquo;<code
15301526
class=property>image-fit</code>&rsquo; as an alias for &lsquo;<a
15311527
href="#object-fit0"><code class=property>object-fit</code></a>&rsquo;, as

‎css3-images/Overview.src.html‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1060,74 +1060,71 @@ <h3 id="object-fit">
10601060
<p>The 'object-fit' property specifies how the contents of a replaced element
10611061
should be scaled relative to the box established by its used height and width.
10621062
It also enables scaling a replaced element's contents up to a specified maximum
1063-
size or down to a specified minimum size while preserving its aspect ratio.</p>
1063+
size or down to a specified minimum size while preserving its aspect ratio.
1064+
This property never affects the size of the replaced element; it only affects
1065+
the size of the contents of the replaced element.</p>
10641066

10651067
<p>Not all replaced elements can be scaled, but images typically can.</p>
10661068

1067-
<p>The contents of a replaced element with an intrinsic aspect ratio (which may be
1068-
derived from intrinsic dimensions) are scaled as follows:</p>
1069+
<p>If the replaced element's content do not have an intrinsic aspect ratio
1070+
(which may be derived from an intrinsic width and height), all of the values
1071+
for 'object-fit' are treated as ''fill''. Otherwise, the contents are scaled
1072+
as follows:</p>
10691073

10701074
<dl>
10711075
<dt>fill</dt>
10721076
<dd>
1073-
<p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
1074-
usual</a>. Scale the content height and width independently so that the edges
1075-
of the content just meet the edges of the box established by the used 'height'
1076-
and 'width'.</p>
1077+
<p>Set the content's size to the <i>concrete object size</i> obtained
1078+
by running the <i title=default-sizing>object sizing algorithm</i> with
1079+
a <i>specified size</i> and a <i>default object size</i> equal to the
1080+
replaced element's used width and height.</p>
1081+
1082+
<p>This will make the contents exactly fill the replaced element.</p>
10771083
</dd>
10781084

10791085
<dt>contain</dt>
10801086
<dd>
1081-
<p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
1082-
usual</a>, except if both 'height' and 'width' are ''auto'', and the used value
1083-
of at least one of 'max-width' and 'max-height' is not 'none', then compute the
1084-
element's used width and used height as though the intrinsic dimensions of the
1085-
contents were infinitely large numbers whose ratio is the actual intrinsic
1086-
ratio of the contents.</p>
1087-
<p>Scale the contents of the element, preserving their aspect ratio, to the
1088-
largest size such that the width of the contents is less than or equal to the
1089-
used width of the box and the height of the contents is less than or equal to
1090-
the used height of the box.</p>
1087+
<p>Set the content's size to the largest width and height that has the
1088+
same aspect ratio as the content's intrinsic aspect ratio, and additionally
1089+
has neither width nor height larger than the replaced element's used
1090+
width and height, respectively.</p>
10911091
</dd>
10921092

10931093
<dt>cover</dt>
10941094
<dd>
1095-
<p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
1096-
usual</a>, except if both 'height' and 'width' are ''auto'', and the used value
1097-
of at least one of 'min-width' and 'min-height' is not ''0'', then compute the
1098-
1099-
1100-
used width and used height of the element as though the intrinsic dimensions of
1101-
the contents were infinitesimally small numbers whose ratio is the actual
1102-
intrinsic ratio of the contents.</p>
1103-
<p>Scale the contents of the element, preserving their aspect ratio, to the
1104-
smallest size such that the width of the contents is greater than or equal to
1105-
the used width of the box and the height of the contents is greater than or
1106-
equal to the height of the box.</p>
1095+
<p>Set the content's size to the smallest width and height that has
1096+
the same aspect ratio as the content's intrinsic aspect ratio, and
1097+
additionally has neither width nor height smaller than the replaced
1098+
element's used width and height, respectively.</p>
11071099
</dd>
11081100

11091101
<dt>none</dt>
11101102
<dd>
1111-
<p>Determine the used 'height' and 'width' <a href="/TR/CSS21/visudet.html">as
1112-
usual</a>. If the content has an intrinsic height and width, do not
1113-
scale it. Otherwise, this value must be treated as ''fill''.</p>
1103+
<p>Set the content's size to the <i>concrete object size</i> obtained
1104+
by running the <i title=default-sizing>object sizing algorithm</i> with
1105+
no <i>specified size</i>, and a <i>default object size</i> equal to
1106+
the replaced element's used width and height.</p>
11141107
</dd>
11151108

11161109
<dt>scale-down <b class=issue>better name?</i></dt>
11171110
<dd>
1118-
<p>This value must act identically to ''none'' or ''contain'', whichever
1119-
would make the contents smaller.</p>
1111+
<p>Size the content as if 'none' or 'contain' were specified, whichever
1112+
would result in a smaller size.</p>
1113+
1114+
<p class=note>Note that both 'none' and 'contain' respect the content's
1115+
intrinsic aspect ratio, so the concept of "smaller" is well-defined.</p>
11201116
</dd>
11211117
</dl>
11221118

11231119
<p class=issue>ISSUE: 'none' and 'scale-down' are a bit controversial. Need some
11241120
discussion on use-cases for each. Particularly, is there existing content behavior
11251121
(perhaps surrounding &lt;object>) that requires one of these values?</p>
11261122

1127-
<p>The 'overflow' property determines how to render parts of the replaced
1128-
element's content that extend beyond the edges of its box. See the
1129-
'object-position' property for positioning the object with respect to the
1130-
element's box.</p>
1123+
<p>If the content does not completely fill the replaced element, the unfilled
1124+
space shows the replaced element's background. The 'overflow' property determines
1125+
how to render parts of the replaced element's content that extend beyond the
1126+
edges of its box. See the 'object-position' property for positioning the object
1127+
with respect to the element's box.</p>
11311128

11321129
<div class="figure">
11331130
<p><img src="img_scale.png" style="border: thin solid black;"
@@ -1142,6 +1139,15 @@ <h3 id="object-fit">
11421139
<p class="note">Note: the 'object-fit' property has similar semantics to
11431140
the fit attribute in [[SMIL10]].</p>
11441141

1142+
<p class=note>Note: Per the <i title=object-negotiation>CSS⇋Object Negotiation</i>
1143+
algorithm, the <i>concrete object size</i> (or, in this case, the size of the
1144+
content) does not directly scale the object itself - it is merely passed to
1145+
the object as information about the size of the visible canvas. How to then
1146+
draw into that size is up to the image format. In particular, raster images
1147+
always scale to the given size, while SVG uses the given size as the size of
1148+
the "SVG Viewport" (a term defined by SVG) and then uses the values of several
1149+
attributes on the root &lt;svg> element to determine how to draw itself.</p>
1150+
11451151
<p>User agents MAY accept 'image-fit' as an alias for 'object-fit', as a
11461152
previous version of this specification used that name. Authors must not
11471153
use 'image-fit' in their stylesheets.</p>

0 commit comments

Comments
 (0)