Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: RewindОтветов: 2

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

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

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

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

  • Вы пробовали использовать background-size: cover;? vtamm 21.02.2017

htmlcssaspect-ratio

Ответы

Ответ 1 · рейтинг 1 · jezmck

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

Ответ 2 · Kuba Wojtach

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

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы