Полные изображения в окне просмотра, как на medium.com

Question

Как Medium делает полные изображения в окне просмотра, как в этом примере? (Не заголовок изображения, а первое изображение парня с поднятыми руками).

Я вижу, что они используют background-image и другие свойства css3, например:

<div class="section-background-image" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/700/gradv/29/81/40/1*vd1EjIG6xUWgqcX9uQLS6g.jpeg);"></div>

position: absolute;
top: 0;
left: 0;
right: 0;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;

Но когда я делаю это, это не работает. Я предполагаю, что они также используют JavaScript

Answer 1

Попробуйте поместить свое фоновое изображение в свой CSS

   background-image:url('../images/..');

а также

   WIdth:100%;height:100%;

Удалить

   right: 0;

Answer 2

Используйте свойства ширины и высоты области просмотра после установки для области просмотра значения ширины устройства, например:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

И твой css:

width:100vw; height:100vh;