PhotoSwipe全屏适配窗口

Question

有没有一种方法可以使图像适合浏览器视口？我真的希望将图像放在元素的背景中，而不是创建img标记的正常行为。这样我就可以在css中使用background-size:cover。

Answer 1

一种方法是使用css，并确保你的元素是块级元素，块级元素会自动占据整个屏幕的宽度。

#fullscreen
{

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

} 

另一种解决方案是使用JavaScript，通过将元素的宽度和高度设置为窗口的宽度和高度。

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的插件。