AspectRatioCorrection Property

get_aspectRatioCorrection();
set_aspectRatioCorrection(value);
Object.defineProperty('aspectRatioCorrection');

Property Value

Changing the value of this property will fire the PropertyChanged and TransformChanged events.

When displaying images, sometimes it is necessary to set a manual aspect ratio correction to compensate for irregular screen resolution (pixel size). For example, if you display an image that is 100 by 100 pixels on most monitors, the image will not be an exact square on screen because most monitors have pixels that are rectangular in shape. Setting the AspectRatioCorrection value can fix this issue.

The AspectRatioCorrection is multiplied by the current vertical scale factor of the control CurrentYScaleFactor at all times regardless of the ScaleFactor and SizeMode values.

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

Open the HTML page in your browser, now as you click the Example button, the aspect ratio alternates between 1, 2 and 0.5

example: function SiteLibrary_DefaultPage$example(viewer) {
   var exampleLabel = document.getElementById("exampleLabel");

   // Get the aspect ratio correction value
   var value = viewer.get_aspectRatioCorrection();

   // Flip between 1, 2 and 0.5
   if(value == 1) {
      viewer.set_aspectRatioCorrection(2);
      exampleLabel.textContent = "Aspect ratio is set to 2. The image is displayed with twice the original height";
   }
   else if(value == 2) {
      viewer.set_aspectRatioCorrection(0.5);
      exampleLabel.textContent = "Aspect ratio is set to 0.5. The image is displayed with half the original height";
   }
   else {
      viewer.set_aspectRatioCorrection(1);
      exampleLabel.textContent = "Aspect ratio is set back to 1. The image is displayed with original height";
   }
},