javascript - PhotoSwipe 全屏适合窗口

Question

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

Answer 1

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

#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