Как наложить div на картинку?

Question

[Антон]

https://jsfiddle.net/h3ufmj67/64/
Нужно было поверх картинки наложить несколько div
Использовал position, но теперь между двумя картинками появился отступ.
А картинки должны идти в стык.
Как поправить?

Answer 1

[overveg]

position: relative резервирует место в потоке

Обычно для родительского блока используют position: relative, а для внутреннего блока position: absolute.

В данном случае, мне кажется лучше отказаться от абсолютного или относительного позиционирования текста и сверстать например так.

Еще вариант

Comments

[Антон]

Виктория Шумская Может подскажите, как сделать, чтобы картинка не обрезалась ни по ширине, ни по высоте (сразу не заметил)?

[overveg]

Антон, поиграйтесь со свойством object-fit https://developer.mozilla.org/en-US/docs/Web/CSS/o...
или background-size https://developer.mozilla.org/en-US/docs/Web/CSS/b...
Смотря какой вариант вы выбрали