Ниже представлено визуальное представление того, что я делаю
Код html:
<div class="sk-asset sk-card-2-background"></div>
<div class="sk-asset sk-card-2-description"></div>
<div class="sk-asset sk-card-2-title"></div>
Эти div абсолютно позиционируются по высоте, ширине, левому и верхнему положению. Заголовок «Нет группы с экспортом» - это позиция со свойством background-image, но изображение обрезается (см. Изображение). Если я заменю <div class="sk-asset sk-card-2-title"> тегом <img>, изображение заголовка будет отображаться нормально.
Свойство background-size с "cover & contain" также не работает. Только когда я добавляю background-size с такими же значениями ширины и высоты в пикселях, что и у div, изображение выравнивается правильно.
Не могу понять, в чем проблема.
Немного контекста - я пытаюсь создать плагин скетча для генерации HTML из скетча. Дизайнер может экспортировать группу как изображение. Вот почему в этой задаче текст отображается как изображение.