Как сверстать такой элемент?

Question

[back dev]

Как сверстать такой элемент? Особенно текст в центре.

Comments

[alex-1917]

тут внизу что-то про семантику упомянули и предлагают делать семантику через svg)))
БРЕД!
Можно сделать одной картинкой а семантика вполне покатит, если у картинки будут заполнены теги title и alt!

[Андрей Гончаров]

Я пооффтоплю немного. Видя такие макеты в своей ленте инстграмчика, не думайте, что они все реализовываются. 95% этих скринов - чисто дизайнерские концепты, которые к реальной жизни не имеют отношения, т.к. только красивы, но не юзабельны, или требуют слишком больших затрат на разработку.
Вот конкретно по этому скрину - я вижу wildlife! И Что? что дальше то? Я должен сказать вау - я увидел слона с надписью, или вся суть скрыта в этом мелком тексте по бокам экрана? Короче побомбило меня)

Answer 1

[Ivan Bogachev]

Две больших картинки с object-fit: cover. Одна - нормальная, вторая - только голова и лапа слона, а вокруг нее прозрачное ничего. Голова в центре, при адаптивном изменении пропорций всего этого она никуда не уедет. Картинки одинакового размера. Дальше три слоя с абсолютным позиционированием - нормальная картинка, слой с текстом и картинка с головой. Текст - в виде встроенной SVG, там на него можно будет кроссбраузерно наложить любые градиенты.

Comments

[Ivan Bogachev]

Nikolay Petyukh, Проще, но лучше все-таки размер надписи не привязывать жестко к картинке, а то на вертикальном экране телефона она вылезет по краям. Пусть лучше надпись адаптируется сама по себе, а слон сам по себе.

Answer 2

[Максим Тимофеев]

Верстается такое так:
<img src="/path/to/my/img.jpg" >
Если текст для семантики надо текстом - svg

Answer 3

[Егор Данченко]

Простыми словами - SVG