Как выровнять тексты по горизонтали и вертикали внутри изображения, чтобы оно оставалось отзывчивым?

Question

Я хочу разместить текст на изображении, поэтому я использовал позиционный подход (относительный и абсолютный). Этот подход работает, но не реагирует. Мне нужно писать медиа-запросы для всех измерений. Есть ли лучший подход тогда, когда мне не нужно использовать медиа-запросы, и он настраивается сам по себе во всех ситуациях (например, если контент больше ... или динамический c)

** Bootstrap **

<div class="ticket">
                    <img src="img/144ppi/Asset 2.png" alt="" class="tickectImg img-fluid">
                    <h1 class="heading">Rolex</h1>
                    <p class="poolTitle">Pool # :
                        <span class="poolNo">UC 001</span>
                    </p>
                    <h1 class="drawDateNo">2020 05 07</h1>
                    <p class="drawDateTitle">Draw Date</p>
                    <p class="tickectTitle align-middle">Ticket</p>
                    <h3 class="ticketNo">123345</h3>
                </div>

CSS

.ticket {
    position: relative;
}


.heading {
    position: absolute;
    top: 4px;
    left: 40px;
    font-size: 2rem;
    background: linear-gradient(90deg, #272769, #3950a2, #272769);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.poolTitle {
    position: absolute;
    top: 34px;
    left: 40px;
}

.drawDateNo {
    position: absolute;
    bottom: 18px;
    left: 40px;
    font-size: 2rem;
    background: linear-gradient(90deg, #272769, #3950a2, #272769);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.drawDateTitle {
    position: absolute;
    bottom: -6px;
    left: 40px;
}

.tickectTitle {
    position: absolute;
    right: 52px;
    top: 46px;
    writing-mode: vertical-rl;
    font-size: 20px;
}

.ticketNo {
    position: absolute;
    right: 18px;
    top: 20px;
    writing-mode: vertical-rl;
    font-size: 34px;
}

Answer 1

Вы добавляете:

.ticket {
position: relative;
 background-image: url("your image");}

затем удаляете «изображение»

Answer 2

Когда изображение находится в фоновом режиме, вы можете добавить следующее:

background: url('img/144ppi/Asset 2.png') no-repeat;
background-size: cover;
background-positition: center;

Answer 3

Вы можете добавить img в фон и позволить тексту в потоке html.

background: url('img/144ppi/Asset 2.png') 

Или вы можете сгруппировать весь текст в контейнере и присвоить контейнеру абсолютную позицию

<div class="ticket">
  <img src="img/144ppi/Asset 2.png" alt="" class="tickectImg img-fluid">
  <div class="ticket-content">
    <h1 class="heading">Rolex</h1>
    <p class="poolTitle">Pool # :
      <span class="poolNo">UC 001</span>
    </p>
    <h1 class="drawDateNo">2020 05 07</h1>
    <p class="drawDateTitle">Draw Date</p>
    <p class="tickectTitle align-middle">Ticket</p>
    <h3 class="ticketNo">123345</h3>
  </div>
</div>