CSS - Изображение в полноэкранном режиме, но будет поддерживать соотношение сторон

Question

Как получить изображение, чтобы заполнить весь экран (обратите внимание, что под ним есть материал - подумайте об этом как заголовок на странице, которая заполняет весь экран), но поддерживает его соотношение сторон, либо превышение ширины, либо превышение по высоте.

Я думал, что это будет:

<img class="w3-image" src="./images/img1.jpg" style="min-width:100vw; max-height:100vh; background-position: center; background-repeat: no-repeat;" /> 

Но это не работает. Соотношение сторон не выполняется.

Answer 1

Вставьте его в качестве фона вместо элемента, с background-size: cover; и элементом с height: 100vh.

Answer 2

В принципе вы можете использовать

background-position: center center; 
background-repeat: no-repeat; 
background-size: cover; 
min-height: 100vh; 
min-width: 100vh; 

http://codepen.io/powaznypowazny/pen/apeVXg

Надеются, что это помогает :)