How to get a serie of images with the same dimension (Width and Height) ?

Undraw Animating


When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual.

To achieve it, you need to use the combine the ratio attribute with a dimension (width or height). It permits to get the same image aspect-ratio as well as the same dimension for all images.

This howto shows you how to do it:


With an image link, you can use the ratio attribute inline.



  • 0x200 sets the width to 0 (auto) and the height to 200
  • ratio=16:9 sets the aspect-ratio to 16:9


Undraw Content Creator Stock Image Surfer In The See

Note that it works for svg as raster images

Page Image

The page image component is used in a fragment iteration to show an illustrative page of an image.

For instance, the page image has an intrinsic ratio of 16:9, we can change it to a ratio of 4:3 with the below markup and constraints the height

   <data>select where path like '%page-image' or path like '%howto'</data>
   <grid max-line=2>
      <box> <!-- Split the horizontal space in boxes -->
        <box align="center text-center" width="200"> <!-- Create boxes of 200 in the split area and center them -->
          <heading 3>${name}</heading>
          <page-image ratio="4:3" height="200"/>
Page Image
Undraw Animating
Task Runner