Relative Sizing

You can set some or all objects to automatically resize to fit a user’s browser window using the Relative Sizing option – a method which, when combined with Relative Positioning, is referred to as “dynamic layout.” (For more information, see Dynamic Layout.)

When objects are set to use Relative Sizing, the project’s target resolution is factored in to determine the size of objects relative to the edges of the browser window. The effects of Relative Sizing are that if the browser window is minimized or made smaller, geometric shapes and drawings are scaled smaller, images and titles are resized smaller, and text is re-wrapped within its containing text box. The opposite effect is observed when the browser window is maximized or made larger.

If, for example, an object is assigned Relative Horizontal Sizing, it will expand or contract right and left if the browser is resized. Similarly, if an object is assigned Relative Vertical Sizing, it will expand or contract top and bottom if the browser is resized.

When Relative Sizing is not selected, an object will be an absolute size, regardless of the height of the browser window.

Setting an object so that its edges touch the guide border means it will be 100% of the browser window size.

Because the browser is doing the re-sizing resizing may not look good in all cases. A small image made large will look pixilated.

With both vertical and horizontal sizing, aspect ratio becomes an issue.

You can assign Relative Horizontal and/or Vertical Sizing to an object using the Relative Horizontal Sizing and/or Relative Vertical Sizing buttons on the Arrange Bar. (For more information, see Arrange Bar.)

Setting Relative Sizing Attributes

To set relative sizing attributes for a single object:

  1. Click to select the object in the Work Window whose sizing attributes you wish to set.
  2. To set a relative horizontal sizing for the object, click the Relative Horizontal Sizing button: in the Arrange Bar

    OR

    To set a relative vertical sizing for the object, click the Relative Vertical Sizing button: in the Arrange Bar.

    OR

    To set both relative and vertical horizontal sizing for the object, click both the Relative Horizontal Sizing button: and the Relative Vertical Sizing button: .

    The selected object will now resize relative to the size of the browser window.

By default, all objects are initially set with absolute sizing attributes.

 

 Previous Next