In addition to setting the board size to fixed pixels, the board's width and/or height can be set as a percentage of its container (window, table cell, etc.). When the container is resized, then the board gets also resized.
When making boards scalable, the scale and salign HTML settings becomes relevant. The width, height, scale, and salign are set in the web page that displays the board. Search for and change their values in the web page code:
<!-- set the width to 100% (scalable) and the height to 500 pixels (fixed) -->
<!-- make the entire content visible and center it -->
Click here to see scalable board examples with different settings.
- Width: The width of the board's background. This can be either in pixels (WIDTH='400') or as a percentage of the browser window (WIDTH='75%').
- Height: The height of the board's background. This can be either in pixels (HEIGHT='400') or as a percentage of the browser window (HEIGHT='75%').
- scale: Defines how the content is displayed. Valid values are:
- showAll: Makes the entire content visible in the specified area without distortion while maintaining the original aspect ratio of the application. Borders can appear on two sides of the application. In this mode, assume that the coordinate system of the board is only 480*300 pixels, which later gets scaled up or down to fit its container. All board graphics must be rendered within 480*300 pixels to be visible.
- noScale: Does not scale the content.
- noBorder: Scales the content to fill the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the content.
- exactFit: Makes the entire content visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur.
- salign: Specifies where a scaled content is positioned in the area that the width and height settings define. Valid values are:
- If this setting is omitted (salign=''), then the content is centered.
- L, R, T, and B: Align the content along the left, right, top or bottom edge respectively, and crop the remaining three sides as needed.
- TL and TR: Align the content to the top-left and top-right corner respectively, and crop the bottom and remaining right or left side as needed.
- BL and BR: Align the content to the bottom-left and bottom-right corner respectively, and crop the top and remaining right or left side as needed.