Skip to content

Commit 625d5b7

Browse files
tabatkinstabatkins
committed
Added image-rendering property.
Prettied up a few section titles.
1 parent d2f2fe2 commit 625d5b7

2 files changed

Lines changed: 155 additions & 11 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 112 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -162,11 +162,17 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
162162
an Image on the Page: the &lsquo;<code
163163
class=property>image-orientation</code>&rsquo; property</a>
164164

165-
<li><a href="#object-fit"><span class=secno>6.3. </span>The &lsquo;<code
166-
class=property>object-fit</code>&rsquo; Property</a>
165+
<li><a href="#image-rendering"><span class=secno>6.3. </span>Determining
166+
How to Scale an Image: The &lsquo;<code
167+
class=property>image-rendering</code>&rsquo; Property</a>
167168

168-
<li><a href="#object-position"><span class=secno>6.4. </span>The
169-
&lsquo;<code class=property>object-position</code>&rsquo; Property</a>
169+
<li><a href="#object-fit"><span class=secno>6.4. </span>Sizing Replaced
170+
Elements: The &lsquo;<code class=property>object-fit</code>&rsquo;
171+
Property</a>
172+
173+
<li><a href="#object-position"><span class=secno>6.5. </span>Positioning
174+
Replaced Images: The &lsquo;<code
175+
class=property>object-position</code>&rsquo; Property</a>
170176
</ul>
171177

172178
<li><a href="#serialization"><span class=secno>7. </span>Serialization</a>
@@ -1342,9 +1348,99 @@ <h3 id=image-orientation><span class=secno>6.2. </span>Orienting an Image
13421348
</pre>
13431349
</div>
13441350

1345-
<h3 id=object-fit><span class=secno>6.3. </span>The &lsquo;<a
1346-
href="#object-fit0"><code class=property>object-fit</code></a>&rsquo;
1347-
Property</h3>
1351+
<div>
1352+
<h3 id=image-rendering><span class=secno>6.3. </span>Determining How to
1353+
Scale an Image: The &lsquo;<a href="#image-rendering0"><code
1354+
class=property>image-rendering</code></a>&rsquo; Property</h3>
1355+
1356+
<table class=propdef>
1357+
<tbody>
1358+
<tr>
1359+
<th>Name:
1360+
1361+
<td><dfn id=image-rendering0>image-rendering</dfn>
1362+
1363+
<tr>
1364+
<th>Value:
1365+
1366+
<td>auto | optimize-contrast
1367+
1368+
<tr>
1369+
<th>Initial:
1370+
1371+
<td>auto
1372+
1373+
<tr>
1374+
<th>Applies to:
1375+
1376+
<td>All elements
1377+
1378+
<tr>
1379+
<th>Inherited:
1380+
1381+
<td>Yes
1382+
1383+
<tr>
1384+
<th>Media:
1385+
1386+
<td>visual
1387+
1388+
<tr>
1389+
<th>Computed Value:
1390+
1391+
<td>specified value
1392+
</table>
1393+
1394+
<p>The &lsquo;<a href="#image-rendering0"><code
1395+
class=property>image-rendering</code></a>&rsquo; property provides a
1396+
hint to the user-agent about what aspects of an image are most important
1397+
to preserve when the image is scaled, to aid the user-agent in the
1398+
choice of an appropriate scaling algorithm. When specified on an
1399+
element, it applies to all images given in properties for the element,
1400+
such as background images, list-style images, or the content of replaced
1401+
elements when they represent an image that must be scaled. The values of
1402+
the &lsquo;<a href="#image-rendering0"><code
1403+
class=property>image-rendering</code></a>&rsquo; property are
1404+
interpreted as follows:</p>
1405+
1406+
<dl>
1407+
<dt>&lsquo;<code class=css>auto</code>&rsquo;
1408+
1409+
<dd>The image should be scaled with an algorithm that maximizes the
1410+
appearance of the image. In particular, scaling algorithms that
1411+
&lsquo;<code class=property>smooth</code>&rsquo; colors are acceptable,
1412+
such as bilinear interpolation. This is intended for images such as
1413+
photos.
1414+
1415+
<dt>&lsquo;<code class=css>optimize-contrast</code>&rsquo;
1416+
1417+
<dd>The image should be scaled with an algorithm that maximizes the
1418+
contrast of the image, preserving sharp lines and not smoothing colors
1419+
or introducing blur to the image in the process. This is intended for
1420+
images such as pixel art.
1421+
</dl>
1422+
1423+
<p>This property does <em>not</em> dictate any particular scaling
1424+
algorithm to be used. For example, with &lsquo;<code
1425+
class=css>image-rendering:auto</code>&rsquo;, a user agent may scale
1426+
images with bilinear interpolation by default, switch to
1427+
nearest-neighbor interpolation in high-load situations, and switch to a
1428+
high-quality scaling algorithm like Lanczos interpolation for static
1429+
images that aren't moving or changing. Similarly, with &lsquo;<code
1430+
class=css>image-rendering:optimize-contrast</code>&rsquo;, a user agent
1431+
may scale images with nearest-neighbor interpolation by default, and
1432+
switch to EPX interpolation in low-load situations.</p>
1433+
1434+
<p>This property previously accepted the values &lsquo;<code
1435+
class=css>optimizeSpeed</code>&rsquo; and &lsquo;<code
1436+
class=css>optimizeQuality</code>&rsquo;. These are now deprecated; a
1437+
user agent may accept them as valid values, but must treat them as
1438+
aliases for the &lsquo;<code class=css>auto</code>&rsquo; value.</p>
1439+
</div>
1440+
1441+
<h3 id=object-fit><span class=secno>6.4. </span>Sizing Replaced Elements:
1442+
The &lsquo;<a href="#object-fit0"><code
1443+
class=property>object-fit</code></a>&rsquo; Property</h3>
13481444

13491445
<table class=propdef>
13501446
<tbody>
@@ -1486,8 +1582,8 @@ <h3 id=object-fit><span class=secno>6.3. </span>The &lsquo;<a
14861582
class=property>object-position</code></a>&rsquo;.</p>
14871583
</div>
14881584

1489-
<h3 id=object-position><span class=secno>6.4. </span>The &lsquo;<a
1490-
href="#object-position0"><code
1585+
<h3 id=object-position><span class=secno>6.5. </span>Positioning Replaced
1586+
Images: The &lsquo;<a href="#object-position0"><code
14911587
class=property>object-position</code></a>&rsquo; Property</h3>
14921588

14931589
<table class=propdef>
@@ -1801,6 +1897,13 @@ <h3 id=serializing-properties><span class=secno>7.7. </span>Serializing
18011897
<li>Serialize the &lt;angle> and append it to s.
18021898
</ol>
18031899

1900+
<p>To serialize the &lsquo;<a href="#image-rendering0"><code
1901+
class=property>image-rendering</code></a>&rsquo; property:</p>
1902+
1903+
<ol>
1904+
<li>Serialize the keyword and append it to s.
1905+
</ol>
1906+
18041907
<p>To serialize the &lsquo;<a href="#object-fit0"><code
18051908
class=property>object-fit</code></a>&rsquo; property:</p>
18061909

‎css3-images/Overview.src.html‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -646,7 +646,44 @@ <h3 id="image-orientation">Orienting an Image on the Page: the 'image-orientatio
646646
</pre>
647647
</div>
648648

649-
<h3 id="object-fit">The 'object-fit' Property</h3>
649+
<div>
650+
<h3 id=image-rendering>Determining How to Scale an Image: The 'image-rendering' Property</h3>
651+
652+
<table class=propdef>
653+
<tr>
654+
<th>Name:
655+
<td><dfn>image-rendering</dfn>
656+
<tr>
657+
<th>Value:
658+
<td>auto | optimize-contrast
659+
<tr>
660+
<th>Initial:
661+
<td>auto
662+
<tr>
663+
<th>Applies to:
664+
<td>All elements
665+
<tr>
666+
<th>Inherited:
667+
<td>Yes
668+
<tr>
669+
<th>Media:
670+
<td>visual
671+
<tr>
672+
<th>Computed Value:
673+
<td>specified value
674+
</table>
675+
<p>The 'image-rendering' property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm. When specified on an element, it applies to all images given in properties for the element, such as background images, list-style images, or the content of replaced elements when they represent an image that must be scaled. The values of the 'image-rendering' property are interpreted as follows:</p>
676+
<dl>
677+
<dt>''auto''</dt>
678+
<dd>The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that 'smooth' colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.</dd>
679+
<dt>''optimize-contrast''</dt>
680+
<dd>The image should be scaled with an algorithm that maximizes the contrast of the image, preserving sharp lines and not smoothing colors or introducing blur to the image in the process. This is intended for images such as pixel art.</dd>
681+
</dl>
682+
<p>This property does <em>not</em> dictate any particular scaling algorithm to be used. For example, with ''image-rendering:auto'', a user agent may scale images with bilinear interpolation by default, switch to nearest-neighbor interpolation in high-load situations, and switch to a high-quality scaling algorithm like Lanczos interpolation for static images that aren't moving or changing. Similarly, with ''image-rendering:optimize-contrast'', a user agent may scale images with nearest-neighbor interpolation by default, and switch to EPX interpolation in low-load situations.</p>
683+
<p>This property previously accepted the values ''optimizeSpeed'' and ''optimizeQuality''. These are now deprecated; a user agent may accept them as valid values, but must treat them as aliases for the ''auto'' value.</p>
684+
</div>
685+
686+
<h3 id="object-fit">Sizing Replaced Elements: The 'object-fit' Property</h3>
650687

651688
<table class="propdef">
652689
<tr>
@@ -740,7 +777,7 @@ <h3 id="object-fit">The 'object-fit' Property</h3>
740777
initial value for 'object-position'.</p>
741778
</div>
742779

743-
<h3 id="object-position">The 'object-position' Property</h3>
780+
<h3 id="object-position">Positioning Replaced Images: The 'object-position' Property</h3>
744781

745782
<table class="propdef">
746783
<tr>
@@ -905,6 +942,10 @@ <h3 id=serializing-properties>Serializing new properties</h3>
905942
<ol>
906943
<li>Serialize the &lt;angle> and append it to s.</li>
907944
</ol>
945+
<p>To serialize the 'image-rendering' property:</p>
946+
<ol>
947+
<li>Serialize the keyword and append it to s.</li>
948+
</ol>
908949
<p>To serialize the 'object-fit' property:</p>
909950
<ol>
910951
<li>Serialize the keyword and append it to s.</li>

0 commit comments

Comments
 (0)