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

Question

[sloupone]

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



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

Если я что-то совсем неправильно понимаю, прошу направить в нужное русло.

Comments

[sim3x]

Загрузите картинку на хабрасторадж

Answer 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. В таком случае проблем с тенью не возникнет.

Comments

[sloupone]

Спасибо!

Answer 2

[Shadowman69]

Насколько я знаю, такие картинки верстаются фоном, через background.

Comments

[sloupone]

А если стоит задача конструировать такие блоки в админке? Тогда можно только инлайн-стилями, что не есть хорошо.

[Shadowman69]

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

[profesor08]

sloupone, глупости. Можно задавать инлайн стилем картинки, и ничего страшного не произойдет. Более того, предоставляет больше удобств при редактировании макета. Поисковики это тоже любят.