PhotoSwipe full screen mode suitable for window

Question

Is there a way to put an image in the browser viewport? I would really like to place the image on the background of the element instead of the usual img markup behavior. This will allow me to use background-size: cover in css.

Answer 1

One way to do this is to simply use css and make sure that the element is a block level element, block level elements automatically occupy the entire 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';

, css http://plnkr.co/edit/yatuyJj5941hCVNmoSwD?p=preview

Answer 2

, , - :

HTML

<div class="container">
  <div class="fullscreen-img"></div>
</div>

CSS

.container {
   width: 100%;
   height: 100%;
}

.fullscreen-img {
   background: url('http://www.hidefia.com/wp-content/uploads/2015/02/I-Love-Html5-Minimal-HD-Wallpaper.jpg') no-repeat center center;
   background-size: cover;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

, .