Отзывчивый заголовок // изменить размер img и текст поверх img - PullRequest
Новая
       0

Отзывчивый заголовок // изменить размер img и текст поверх img

0 голосов
/ 15 ноября 2018

Мне нужно img и текст для изменения размера в зависимости от размера div // размер экрана.текст не должен выходить из img при изменении размера.Я также попытался с атрибутом подгонки объекта, и он не работает.Пожалуйста, помогите !!! 

    <div class="row" id="bannerDiv">
      <img class="img-fluid" src="img/10045731_open-space-office.jpg" alt="banner">
      <div id="bannerText">
         <h3>Live webinar</h3>
         <h1>Veeam Virtual Labs: Begginer to Advanced</h1>
      <input type="button" id="regButton" value="REGISTER NOW">
      </div>
     </div>

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Поскольку мы не уверены, что вы можете использовать scss / mixins для медиа-запросов или если вы можете использовать JS, я предоставлю решение jquery, которое может дать вам подсказку, но без остальной части вашего кода я не смогу сделать лучше.Скрипка была бы хороша. 

if (window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches) {
  //do something with the text or image
}
0 голосов
/ 15 ноября 2018

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

#bannerDiv {
position: relative;
}
#bannerText {
position: absolute;
left: 50px;
top: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="bannerDiv">
  <img class="img-fluid" src="https://via.placeholder.com/900x300" alt="banner">
  <div id="bannerText">
    <h3>Live webinar</h3>
    <h1>Veeam Virtual Labs: Begginer to Advanced</h1>
    <input type="button" id="regButton" value="REGISTER NOW">
  </div>
</div>
...