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

PhotoSwipe全屏适合窗口

1 个答案: