Question

我需要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>

Answer 1

一个选项是对文本和按钮使用绝对定位。您可能需要使用media query更改标题的字体大小。

#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解决方案，该解决方案可能会给您提示，但如果没有其余代码，我做不到。小提琴会很好。

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

响应头//调整img的大小和img上的文本

2 个答案: