@sloupone

Как верстаются подобные элементы?

Верстаю лендинг. На странице есть несколько таких блоков: в каждом несколько картинок, при уменьшении размера экрана картинки должны частично уходить за правый край экрана.

xhwYyzUs6Ec.jpg

Собственно, два вопроса
1. Сейчас обе картинки абсолютно спозиционированы, как по БЭМ назначать каждой top/left? Если просто создать для каждой картинки уникальный БЭМ-модификатор, то нельзя будет создавать новые такие блоки с другими top/left из админки, если нет подходящего класса.
2. Для того, чтобы картинки частично скрывались за правым краем экрана, у контейнера overflow: hidden. Но так теряется тень слева у самой левой картинки. Если сделать margin слева, то картинки уже будут не по сетке. Как поступить?

Если я что-то совсем неправильно понимаю, прошу направить в нужное русло.
  • Вопрос задан
  • 384 просмотра
Решения вопроса 1
Отвечу на примере бутстрапа, но подойдет под что угодно, как вы понимаете.

1. Допустим у вас есть два блока:
<div class="row">
	<div class="col-xl-6"></div>
	<div class="col-xl-6"></div>
</div>

Во второй блок .col-xl-6 вы помещаете img и самой картинке дописываете стиль: width:inherit;, при этом максимальная ширина картинки не должна быть 100% (max-width:100%;), этого условия вообще не должно быть для нее. Тогда у вас картинка будет становиться по 100% ширине и вылезать за пределы блока.

2. Как вы верно сказали, для того чтобы не было полосы прокрутки - нужно делать overflow:hidden для блока. Но вам нужно делать не для контейнера (если вы имеете ввиду бутстраповский контейнер), а для самой секции, либо body. В таком случае проблем с тенью не возникнет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Shadowman69
Верстать или не верстать - вот в чем вопрос?
Насколько я знаю, такие картинки верстаются фоном, через background.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы