Как я могу сделать отзывчивый текст поверх изображения с bootstrap 4

Question

У меня есть изображение с содержимым внутри, я хочу, чтобы буквы, которые находятся внутри изображения, были адаптивными, когда я изменяю размер экрана, буквы должны иметь одинаковые пропорции, но теперь они перекрывают друг друга при изменении размера экрана. нужно делать только с сеткой bootstrap, нельзя с медиазапросами

.banner{
    position: relative;
}
.heading-annual{
    position: absolute;
    top: 10%;
    color: whitesmoke;
    left: 7%;
}
.heading-medicine{
    position: absolute;
    top: 25%;
    color: whitesmoke;
    left: 7%;
}
.heading-manchester{
    position: absolute;
    top: 43%;
    color: whitesmoke;
    left: 7%;
}
.heading-date{
    position: absolute;
    top: 55%;
    color: whitesmoke;
    left: 7%;
}

<div class="container-fluid px-0">
        <div class="row">
            <div class="col-md-12 col-lg-12 banner">
                <img src="https://rcpmedicine.co.uk/wp-content/uploads/2018/11/new_banner_home.png" height="100%" width="100%" >
            </div>
        </div>
    </div>
    <h1 class="heading-annual">RCP annual conference</h1>
    <h1 class="heading-medicine">Medicine 2019</h1>
    <h4 class="heading-manchester">Manchester Central</h4>
    <h4 class="heading-date">25-26 April 2019</h4>

Answer 1

Есть ли причина, по которой вы должны использовать img? Не могли бы вы вместо этого использовать фоновое изображение?

Попробуйте это.

.banner {
  min-height: 500px;
  display: flex;
  align-items: center;
  background-image: url(https://rcpmedicine.co.uk/wp-content/uploads/2018/11/new_banner_home.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 50px;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid banner">
        <div class="row">
            <div class="col-md-12 col-lg-12 ">
                <h1 class="heading-annual">RCP annual conference</h1>
                <h1 class="heading-medicine">Medicine 2019</h1>
                <h4 class="heading-manchester">Manchester Central</h4>
                <h4 class="heading-date">25-26 April 2019</h4>
            </div>
        </div>
    </div>