image viewer resize and fit to window size

[Shah]

When i resize the window canvas size has to be change and fit to current window and the look should be same in all screen size.

templates/studyviewer.html inside thumbnails div is there based on this size remaining screen is changing but i want to display 100% width onclick thumbnail button compress the image viewer and display thumbnails.

code ->

<div class="thumbnailSelector">

<div class="thumbnails"></div>

</div>

I have tried removed thumbnail css classes then also it is it not responsive.

 

<div class="viewer" id="">

---buttons here

<div class="imageViewer" id=""> </div>

</div>

To this viewer and imageviewer classes cornerstone they adding dynamic width and height those are in px which making problem.

canvas width and height also cornerstone passing dynamic values those are not responsive how do i fit to window screen automatically.

function resizeStudyViewer() {

var studyRow = $(studyViewer).find('.studyContainer')[0];

var height = $(studyRow).height();

var width = $(studyRow).width();

$(seriesList).height("100%");

// $(parentDiv).width(width - $(studyViewer).find('.thumbnailSelector:eq(0)').width());

$(parentDiv).css({ height: '100%' });

$(parentDiv).css({ width: '80%' });

$(imageViewerElement).css({ height: $(parentDiv).height() - $(parentDiv).find('.text-center1:eq(0)').height() });

imageViewer.forEachElement(function (el, vp) {

console.log(el)

dhp.resize(el, true);

if ($(el).data('waiting')) {

var ol = vp.find('.overlay-text');

if (ol.length < 1) {

ol = $('<div class="overlay overlay-text">Please drag a stack onto here to view images.</div>').appendTo(vp);

}

var ow = vp.width() / 2, oh = vp.height() / 2;

ol.css({ top: oh, left: ow - (ol.width() / 2) });

}

});

}

in this resize function i have tried to modify can one please help me