Как сделать фон (из нескольких фото) адаптивным?

Question

[maaestr0]

Здравствуйте, верстаю сайт на котором фон состоит из нескольких изображений.

Сделал это следующим способом

.first-screen{
    width: 100%;
    height: 100vh;
    background-image: url(../img/fs1.png) , url(../img/fs2.png), url(../img/fs3.png);
    background-repeat: no-repeat;
    background-size: 33.333%;
    background-position: left, center, right;
    background-attachment: fixed;
}

Но при адаптации выходит следующее

Как сделать чтобы картинки были во всю высоту?
Буду благодарен за любой совет.

Comments

[Антон Литвиненко]

мое мнение - это фон из одного изображения которое дизайнер сделал из трех. всегда примеряйте в таких случаях, а как оно будет, если изображения нужно будет загружать на сайт из какойнибудь cms. В вашем случае никак

[Ankhena]

Начать нужно с самого начала: со школьной геометрии и пропорций.

Если высота будет на всю высоту окна, а ширина каждой картинки 33%, то при изменении пропорций окна либо будет отступ либо что-то где-то обрежется либо некрасиво растянется/сожмется.

Конкретно про ваш вопрос: высота картинок на всю высоту блока это 100%. Либо прямо 100vh.
Только результат вам скорее всего не понравится по причинам описанным выше.

Т.е. перед тем как этот блок делать адаптивным, нужно понять как эти картинки должны себя вести. Можете нарисовать. При таких-то пропорциях будет так, при других вот так, а если повернуть монитор, то заменим картинки.

Вариант слить в одну картинку на первый взгляд кажется хорошим, но проблемы не решит.
cover обрежет правую и левую девушек или окончательно лишит головы среднюю.
contain оставит свободное место
100% по ширине либо обрежет либо оставит место
100% по высоте - симметрично 100% по ширине.

Можно подумать вот о чем: картинки-фотки новой коллекции скорее всего контентные.
И тогда задача упрощается до 3х блоков и object-fit для каждой картинки.
Получим немного больший простор для манипуляций.

Идея делать картинки фоном, но с помощью трех пустых блоков в обертке - далеко не лучшая - дает только мусор в разметке.

[SuperToster]

Ankhena,

Идея делать картинки фоном, но с помощью трех пустых блоков в обертке - далеко не лучшая - дает только мусор в разметке.

Если отбросить персональные представления о том, что такое "мусорная" разметка.. Не затруднит дать ссылку на какой-нибудь материал который канонизирует чистоту разметки такой, как она видится вам в контексте данной задачи?

Можно чуть подробней о преимуществах 3-х элементов img перед 3-мя элементами div? Разве не проще и удобней будет работать с фоновыми изображениями (в контексте конкретной задачи)?

[Ankhena]

SuperToster,
Как отличить контентное изображение от декоративного

Тут можно повернуть в обе стороны.
1. Считать, что изображения контентными, потому что на них изображен товар из новой коллекции. Если они пропадут, то и часть смысла тоже.
Тогда делаем эти три блока в обертке (тоже можно по-разному, например, 3 figure в div или даже section; или ul), вставляем img, задаем object-fit.
2. Считать, что это украшение, потому что сами товары представлены ниже уже конкретно.
Тогда добавляем их стилями.

Мусор это те теги без которых можно обойтись. Это если не углубляться в семантику, откуда вообще и зачем взялся HTML, его развитие, в частности переходы из 3 версии в 4 и затем в 5 и подобное.
Если хочется сделать пустой тег, то с большой долей вероятности вы делаете что-то не то. Исключения бывают при каком-то сильно навороченном дизайне (когда не хватает двух псевдо), сложных анимациях (но скорее там уже будет SVG), тег подготовлен для дальнейшего вывода в него информации с помощью JS (<output> и не только).

Answer 1

[SuperToster]

Вы хотите масштабировать изображение c сохранением пропорций, чтобы изображение обрезалось либо слева-справа, либо сверху-снизу.

И при этом не даёте границ в которых оно должно обрезаться.

Самый простой путь (он же правильный):
— сделать родитель с тремя дочерними контейнерами;
— отпозиционировать контейнеры так, как у вас должны размещаться картинки;
— добавить каждую картинку в свой контейнер со значением cover (background-size: cover;).

Можно и в одном контейнере, с помощью псевдоэлементов и добавления фона центральной картинке, но это будет богопротивное извращение : ).