How to resize viewport to fill whole container irrespective of aspect ratio

  • 1
  • Question
  • Updated 10 years ago
  • Answered
Hi, i am newbee to sea-dragon. Please help me out in this -
I have an sea-dragon container of size 500*400. I have copied example code from sea-dragon site itself which is =>
viewer = new Seadragon.Viewer("container");
viewer.openDzi("http://seadragon.com/content/images/b..., '');

As shown in screen shot, sea-dragon viewport resizing itself as per the containers dimensions but maintaining aspect ratio.

Is there any way to tell viewport to resize it as per the "actual" container dimensions w/o respecting aspect ratio. What i meant is viewport should fill whole container w/o any empty spaces leaving around. So that when user 1st times opens page he wont be seeing any empty spaces in container.

I am ok with spaces on zoom-out.
Photo of Devil Evil

Devil Evil

  • 5 Posts
  • 1 Reply Like
  • happy

Posted 10 years ago

  • 1
Photo of Nathanael Lawrence

Nathanael Lawrence

  • 795 Posts
  • 55 Reply Likes
Are you just asking for the image to be fitted to the edges of the smallest dimension, rather than the largest?

In other words, for the above example you want the height of the world map to be what is fit to the viewport, rather than the height?
Photo of Devil Evil

Devil Evil

  • 5 Posts
  • 1 Reply Like
Well, in above case i want world map to take height of container (coz it already occupying container width). But in general i want world map to occupy container width as well as height. Can it be achieved by adding function on "open" event which will zoom in to viewport ? And is this the only way?
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Yep, adding an "open" event listener is the way to do it!
Photo of Andrew Roberts

Andrew Roberts

  • 1 Post
  • 1 Reply Like
If you want the image to fill the whole container this will crop the image along the x axis. I'm doing this myself, hope it helps. It maybe best for you to simply re-size the containers height?

var mybounds = viewer.viewport.getBounds();
var original_dim = viewer.source.dimensions;
var ratio = viewer.viewport.getAspectRatio();

if( mybounds.x < 0 ) {
//clipping vertically
var newWidth = original_dim.y/original_dim.x;
var newHeight = newWidth/ratio; // 0.5
x = 0;
y = 0;
} else {
//clipping horizontally
var newHeight = original_dim.y/original_dim.x;
var newWidth = ratio*newHeight;
x = 0;
y = 0;
}

//
// pan and zoom viewer to area
imgPreset = new Seadragon.Rect(x, y, newWidth, newHeight);
viewer.viewport.fitBounds(imgPreset, true);

Ive done this recently which zooms the image and fills the full available space. NOTE: this will crop the image.

Andrew

edited: removed opening and closing curly brackets on if else to allow message to parse
Photo of Aseem Kishore

Aseem Kishore, Former Employee

  • 702 Posts
  • 124 Reply Likes
Thanks for the code sample!
Photo of Devil Evil

Devil Evil

  • 5 Posts
  • 1 Reply Like
Thanks a lot guys.. things did worked out for me using above techniques. Sorry for very late reply.