PhotoSwipe fullscreen подходит для окна

Question

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

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

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

Я надеюсь, что это вам поможет.