Полноэкранный режим PhotoSwipe подходит для окна

Есть ли способ поместить изображение в окно просмотра браузера? Я бы очень хотел поместить изображение на фоне элемента вместо обычного поведения создания разметки img. Это позволит мне использовать background-size: cover в css.

2 ответа

Один из способов сделать это - просто использовать 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


Если вам нужно использовать изображение в качестве фона, которое будет соответствовать любому окну просмотра, вы можете иметь что-то вроде этого:

HTML

<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;
}

Надеюсь, это поможет вам.

licensed under cc by-sa 3.0 with attribution.