Styling an image

Just like many other elements, images can be given borders and rounded corners, and they can be rotated. How to do this isn't any different from the way it is done with other elements, so it isn't described in this topic, but in general formatting topics; see Styling and formatting.
This topic discusses specific image formatting issues.

Note that image characteristics like brightness and contrast can not be changed within the Designer.

Local formatting vs. style sheets

Just as other elements, images can be styled in two ways:

  • With local formatting. This means styling the image directly, using the Formatting dialog.
  • 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 for background information about these two methods.

Applying local formatting to an image

To apply local formatting to an image, either:

  • right-click the image and select Image... from the contextual menu
  • click the image and select Format > Image... from the menu.

For an explanation of the available options, see Image Formatting dialog.

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. 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.

  • Click the image and drag the handles to resize it. Press the Shift key while dragging, to scale the image proportionally.
  • Select the image (see Selecting an element) and type the desired width and height in the respective fields on the Attributes pane.
  • Select the image and select Format > Image, on the menu. On the Image tab, change the width and height of the image.
  • Set the size of the image in a style sheet (see Styling templates with CSS files).

The size can be set in a measure or as a percentage of the containing element.

Tip: If placed in a Box, images are by default resized to fit that container. To change this behavior, change the Fit within frame setting in the Image Formatting dialog, the Attributes pane or set the image's object-fit property in CSS. For examples, see MDN Web Docs - object-fit.
More ways to scale and crop images are described in this how-to: Scale and crop images.

Reset the image size

To reset an image to its original size, select the image and click the Reset Image Size button on the Attributes pane, under Geometry.

Positioning an image

Wrapping text around an image

Initially, when an image is inserted into a paragraph, it behaves as if it were a character. Text isn't wrapped around an image automatically. To make that happen, you have to change the float property of the image to left or right. This anchors the image to the left or right, allowing text to be wrapped around it.

Select the image (see Selecting an element) and use the Float left and Float right icons on the toolbar to change the position of an image within the text.

  • The Float left button aligns the image to the left. The text is positioned to the right of it and is wrapped around the box.
  • The Float right button aligns the image to the right, with the text wrapped around it to the left.
  • The No float button positions the image where it occurs in the text, as if it were a character. Text is not wrapped around it.

To position an image using the menu, select the image and then select one of the options in Format > Float.

Alternatively, open the Formatting dialog (see Applying local formatting to an image): select the image; on the menu, select Format > Image and on the Image tab, under Text Wrap, set the Float property.

The float property could also be changed via a style sheet. This property isn't present in one of the tab menus of the style rule editor directly, but you can add it and specify its value after clicking the Advanced button in the style rule editor (see Applying style rules to an image).

Pulling an image out of the text flow

When dragged into a template, an image is automatically integrated in the text flow. This means that it will move up or down, depending on the preceding text.
In a Print section, to position the image independently of the text flow, you can change its position property to absolute. (For an explanation of all values that the position property can possibly have, see MDN Web Docs - position.)
When an image is placed inside a Box (or Div element), changing its position property to absolute positions the image absolutely inside that Box.
Note that float, the property that can make an image float to the right or left (see Wrapping text around an image), is a relative positioning property, since it specifies the position of the element relative to its container. This means it is incompatible with the position:absolute property.

In the Formatting dialog (see Applying local formatting to an image) the position property can be found on the Image tab, under Positioning.
The position property isn't present in one of the tab menus of the style rule editor directly, but you can add it after clicking the Advanced button in the style rule editor (see Applying style rules to an image).

When the position property of an element is set to absolute, the top or bottom and left or right properties can be used to position the element inside its parent with exact values (pixels (px), centimeters (cm), etc). Negative values are allowed.

Note: In Web sections, the position property may sometimes be useful for images inside a Div element, but generally elements should not be positioned absolutely. Designs for the Web should be flexible so that they display nicely on a variety of devices and screen sizes.