Автоматическое изменение размеров фоновых картинок под размеры экранов?

Question

[LetBe]

Приветствую!

Ребят, подскажите решения по css.

Есть: лендинг с множеством фоновых картинок

Цель: фоновые картинки автоматически подгоняются под ширину и высоту экранов разных устройств.

Спасибо.

Может vh и vw? Есть ли с ними какие-то хитрые нюансы?)

P.S.
Неправильный ответ:

. {
    width: 100%;
    height: 100%;
}

Answer 1

[Антон Усачев]

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: зависит от задачи, по умолчанию центр.
}

Comments

[LetBe]

Антон, спасибо. Пока не разу не использовала object-fit и object-position. Попробую!

Answer 2

[Преподаватель программирования]

background-size:cover;

Comments

[LetBe]

Не то.
Но спасибо

Это свойство пропорционально растягивает картинку под площадь ее родителя/контейнера.

А я хочу чтобы адаптировалась картинка под разные размеры экранов.

[Rustam Bainazarov]

LetBe, и что бы это значило? Что именно должно адаптироваться и как это должно выглядеть?

[LetBe]

Рустам Байназаров,
что хочу:
фоновая картинка адаптируется под экраны разных устройств и по ширине и по высоте.

Ну вот есть лендинг и 3 фоновые фото

я хочу чтобы все фото адаптировались под мобильный размер или под размер планшета.
и по ширине и по высоте. Четко. 1 экран = 1 фото.

Чтобы не повеситься с огромным количеством @media
Так понятнее?

PS наполнение не учитывая, ибо только фото будут.

[Rustam Bainazarov]

LetBe, зависит от того, куда эту картинку нужно. Фоновая картинка у какого блока? Если просто блок — делайте блок 100vw и 100vh, ставьте на него ваш фон. Если нужно на body, то на телефонах не работает background-attachment, поэтому отдельным блоком с теми же параметрами и position: fixed.

[LetBe]

Рустам Байназаров,

3 блока.
один за другим
1 блок = 1 фото = 1 экран

Попробую ваше решение. Благодарю)

[Rustam Bainazarov]

LetBe, а в чем проблема тогда? Не проще ли было попробовать? :))



Учтите, что на мобильных 100vh — высота экрана с учетом сжатого интерфейса.

[Rustam Bainazarov]

LetBe, а, ну вы попробовали. Не знаю, в чем проблема, наверное в том, что вы размер фона не поставили.

Кроме того, зачем ограничивать ширину body?

[Преподаватель программирования]

LetBe, что значит адаптировалась под разные размеры экранов?

не понятно

нарисуй что тебе надо

[LetBe]

Рустам Байназаров, это оч правильный вопрос)))
Изначально ставила чтобы помнить под какие размеры верстаю, а сейчас уже по привычке, видимо)

Все получилось, спасибо за ваше время и опыт!

Контейнер определенных размеров(100vh + 100vw)
и внутри картинка с bg:cover

.container {
    width: 100vw;
    height: 100vh;
}

.class_with_img {
    background: url(''):
    background-size: cover;
    height: 100vh;
}

[Rustam Bainazarov]

LetBe, ну а в итоге, пример помог для понимания, что вам нужно?

[LetBe]

Рустам Байназаров, помогло больше обсуждение, чем пример, хотя css по делу всё)
Тк не хочу в html ссылки на ресурсы делать тк возможно понадобится пару фраз поверх фото написать.

[Rustam Bainazarov]

LetBe, LOL, судя по всему, вы не поняли. Я это сделал, чтобы не писать классы, вы на другое там должны были смотреть, а не на inline-пути до картинок.

То, как вы укажете у себя пути до картинок в итоге к сути вопроса вообще не относится.

[LetBe]

Рустам Байназаров, ну, на что бы я ни смотрела, я получила нужный результат.
Благодарю вас за пример кода)

[LetBe]

tosrer, я постараюсь более подробно описывать что мне нужно. Благодарю за уделенное время)