Image Viewer

Can the size of the image viewer auto resize when the browser window size changes?

Scenario

When using Dynamic Web TWAIN in different environments, it may be necessary to change the size of the viewer within the window automatically.

Solution

There are two parts to this:

1. Set the viewer’s initial size based on the window size when the page loads.
2. Keep the viewer’s size in sync as the window is resized afterward.

1. Setting the initial size

You can size the container based on the window size by setting the following in your JavaScript file (before any other Dynamsoft-related operations):

Dynamsoft.DWT.Containers = [
  {
    ContainerId: "dwtcontrolContainer",
    Width: window.innerWidth,
    Height: window.innerHeight,
  },
];

and in dynamsoft.webtwain.config.js, set:

Dynamsoft.DWT.Containers = [];

2. Keeping the size in sync on resize

There are two common approaches:

• Set the viewer’s width/height to a percentage value so it fills its container proportionally, and let your container’s own layout/CSS handle resizing:

    DWTObject.Viewer.width = "100%";
    DWTObject.Viewer.height = "100%";
  

• If you need to calculate an absolute pixel size based on the browser window, listen for the browser’s native resize event and update the viewer’s width/height accordingly:

    function updateSize() {
      DWTObject.Viewer.width = window.innerWidth * 0.5;
      DWTObject.Viewer.height = window.innerHeight * 0.8;
    }
    window.addEventListener('resize', updateSize);
  

Original post creation date: Dec 09, 2021

Last modified date: Jul 30, 2026