To scale image in CSS image-scaling
must be enabled:
<config>
<ress>
<image-scaling />
</ress>
</config>
Scaling instructions in your Cascading Stylesheets allow you to control how images in CSS are processed.
Scaling instructions in CSS are specified in comments and always start with ai-
. More than one instruction per comment is allowed. For a description of available AIs for Image Scaling see Image Scaling.
You can think of CSS AIs having a nested block structure. Instructions take effect up to the next ai-end
or until they are overridden in a later comment. The overriding instruction will remain effective until ai-end
restores its former value.
The following example shows how AIs can be nested within CSS. The indentation just illustrates the AI block concept and is completely optional:
/* ai-quality="85" <-- Quality is set to 85. */
body { background: url(images/wallpaper.jpg) }
h1, h2 { ... }
/* ai-quality="20" ai-scaling-width="64px" ai-inline="true"
^__ Quality 85 is overridden.
*/
.icon { ... }
.icon.home { background-image: url(images/icons/arrow-up.png) }
.icon.back { background-image: url(images/icons/arrow-left.png) }
/* ai-end <-- Quality is restored to 85, ai-scaling-width and ai-inline are reset to the default */
div { ... }
If you have a CSS minifier compressing your stylesheets, you don’t want it to discard your AI comments. Hence, you may start your AI comments with a !
or any other non-alphanumeric character that prevents your minifier from dropping comments:
/*! ai-quality="85" */
To control image processing in style
attributes, you may use DOM based Image Scaling:
<ul style="list-style-image: url(bullet.png)" ai-quality="30" ai-scaling-width="20px">
<li>Item 1</li>
<li>Item 2</li>
</ul>