2022.1

l With local formatting. This means styling the image directly, using the Formatting dialog.
l Via Cascading Style Sheets (CSS). In a style sheet, style rules are declared for
elements with different HTML tags, ID's and classes.
See "Styling and formatting" on page290 for background information about these two methods.
Applying local formatting to an image
To apply local formatting to an image, either:
l right-click the image and select Image... from the contextual menu
l click the image and select Format > Image... from the menu.
For an explanation of the available options, see "Image Formatting dialog" on page496.
Applying style rules to an image
To format an image via a style sheet, first give the image an ID or class: select the image, and
enter the ID or class on the Attributes pane. This makes it possible to make the CSS style rule
target this image specifically, or a set of images with the same class. A style rule with the
selector img (the HTML image tag) would apply to all images.
Next, create the style rule; see "Styling templates with CSS files" on page292. Note that when
a property isn't present in the style rule editor, it can still be used: click the Advanced button in
the style rule editor; enter the property under Property, and its value under Value.
Resizing an image
There are several ways to resize an image after inserting it in the content of a template.
l Click the image and drag the handles to resize it. Press the Shift key while dragging, to
scale the image proportionally.
l Select the image (see "Selecting an element" on page192) and type the desired width
and height in the respective fields on the Attributes pane.
l Select the image and select Format > Image, on the menu. On the Image tab, change the
width and height of the image.
l Set the size of the image in a style sheet (see "Styling templates with CSS files" on
page292).
The size can be set in a measure or as a percentage of the containing element.
Page 317