CSS — изображение в полноэкранном режиме, но с сохранением соотношения сторон

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

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

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

Но это не работает. Соотношение сторон не работает.


html css aspect-ratio
person Rewind    schedule 21.02.2017    source источник
comment
Вы пробовали использовать background-size: cover;?   -  person vtamm    schedule 21.02.2017

Ответы (2)


arrow_upward
1
arrow_downward

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

person jezmck    schedule 21.02.2017

arrow_upward
0
arrow_downward

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

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

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

Надеюсь, поможет :)

person Kuba Wojtach    schedule 21.02.2017