Main viewer area main-viewer-area

The main view area is the area occupied by the zoom image and swatches. It usually sets to fit the available device screen when no size is specified.

When working in embedded mode (when an explicit size is given to the main viewer area), the viewer automatically decreases the height of its main area by the height of the Swatches component that is in working with the single image and therefore, swatches are not needed.

CSS properties of the main viewer area

The appearance of the viewing area is controlled with the following CSS class selector:

CSS property
The width of the viewer.
The height of the viewer.
Background color in hexadecimal format.

Example - to set up a viewer with a white background ( #FFFFFF) and make its size 512 x 288 pixels.

.s7zoomviewer {
 background-color: #FFFFFF;
 width: 512px;
 height: 288px;