WinJS.UI.ViewBox object

Scales a single child element to fill the available space without resizing it. This control reacts to changes in the size of the container as well as changes in size of the child element. For example, a media query may result in a change in aspect ratio.

Important  

If you add more than one element to a ViewBox, only the first element is resized. If you must scale more than one element, wrap the set of elements in a DIV. See the example below for more information. Elements that do not scale, such as text, are not affected by the transforms used for the ViewBox.

Syntax

<div data-win-control="WinJS.UI.ViewBox"></div>

var object = new WinJS.UI.ViewBox();

Members

The ViewBox object has these types of members:

• Methods
• Properties

Methods

The ViewBox object has these methods.

Properties

The ViewBox object has these properties.

Styling the ViewBox

CSS classes

To customize a ViewBox, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):

Examples

The following HTML shows how to display multiple elements inside a ViewBox:

<div data-win-control="WinJS.UI.ViewBox">
        <div id="containerDiv">
            <div id="div1">
            <div id="div2">
            <div id="div3">
        </div>
    </div>

Requirements

Build date: 12/5/2012