PhotoSwipe fullscreen fit to window

Question

Is there a way to fit the image to the browser viewport ? I would really like to put the image in the background of the element instead of the normal behaviour of creating an img markup. That would let me use background-size:cover in css.

Answer 1

One way to do this is just use css, and make sure you element is a block level element, block level elements automatically takes up the full width of the screen.

#fullscreen
{

  height: 100vh;
  background-image: url("http://placehold.it/500x500");
  background-repeat: no-repeat;
  background-size:cover;

} 

Another solution is to use JavaScript, by setting the width and height of the element to the width and height of the window.

var width = window.innerWidth;
var height = window.innerHeight;

var yourEl = document.getElementById('your elements Id');
yourEl.style.height = height + 'px';
yourEl.style.width =  width + 'px';

Here is a plunk that uses just css http://plnkr.co/edit/yatuyJj5941hCVNmoSwD?p=preview