Как часть картинки наложить на другой div?

Question

[Heorhii]

Здравствуйте. Нужен совет. Нужно сделать как на скрине, но чтобы вся эта каша была адаптивной. Чтобы показать Вам этот пример я картинке задал абсолютное позиционирование, лефт 25%, а черному div position:relative и margin-top:250px. Есть у кого варианты получше? Поделитесь опытом
P.S присутствуют стили бутстрапа

Comments

[Евгений Вольф]

"Варианты получше" - чего именно Вас интересуют? Что конкретно нужно в конечном итоге получить? DIV с картинокй, расркшенный 50/50? (половина белый, половина серый)

[Heorhii]

Евгений Вольф: Да. Плюс картинка ровно по центру и допустим если высота картинки 100px, то 50 на один блок и 50 на другой

[Евгений Вольф]

Георгий Городенко: вопрос именно в блоке или в его раскраске? На картинке, я вижу один блок, раскрашенный на 50% белым, 50% темно-серым

[Heorhii]

Евгений Вольф: В блоке и адаптивности. А на скрине два блока

[Евгений Вольф]

Плюс картинка ровно по центру и допустим если высота картинки 100px, то 50 на один блок и 50 на другой

Я думаю, так получиться сделать либо через JS, либо через какие-то статические правила, либо... Иными словами, мы не можем померить высоту какого либо элемента (или получить какое либо значение параметра, в виде переменной), и на основе этого задать правила. Максимум, что мы можем в CSS - это использовать медиа-запросы, и переопределять свойства элементов, в зависимости от размеров экрана устройства. Иначе говоря, "если высота картинки 100px, то задавать ей отступ - мы будем руками", либо через JS.

[Heorhii]

Евгений Вольф: Тоже сначала думал в этом направлении но внизу чел сделал то что мне нужно с помощью псевдоэлементов. И чем хорошо это все в одном блоке, и адаптивность не хромает

Answer 1

[Андрей Б.]

https://jsfiddle.net/y7dvbbvt/

Comments

[Heorhii]

Андрей, можно вопрос не по теме?

[Андрей Б.]

Георгий Городенко можно

[Heorhii]

Андрей Б.: Спасибо, уже решил. Не актуально

Answer 2

[Олег]

https://jsfiddle.net/bjsedf40/1/