CSS Image Scaling

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>