响应性页眉//调整img和img上的文本大小

Question

我需要img和text根据div大小//屏幕大小调整大小。调整大小时文本不应离开img。我也试过使用object fit atribute，但它不起作用。请帮忙！！！

    <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>

Answer 1

一个选项是对文本和按钮使用绝对定位。您可能需要使用媒体查询更改页眉的字体大小。

#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>

Answer 2

由于我们不确定您是否可以使用scss/mixins进行媒体查询，或者是否可以使用JS，我将提供jquery解决方案，它可能会给您一个提示，但如果没有您的其余代码，我做得再好不过了。Fiddle会很好。

if (window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches) {
  //do something with the text or image
}