html - 在背景图片上写文字没有响应

Question

我想在图像上写一些文本，我将图像设置为我的 div 元素的背景，但是当我写文本时，它会在小屏幕设备中超出图像范围。如何修复以使其完全响应？我写了这段代码:

#background {
  background: url("../../imgs/88246.jpg") no-repeat;
  background-size: 100%;
}

<div class="h-100 container-fluid">
  <div id="background" class="row h-100 justify-content-center align-items-center">
    <h1 class="display-4">AYMAN TARIG</h1>
  </div>
</div>

Answer 1

您可以通过使用 vw 作为字体大小和图像宽度来做到这一点，以便它们都响应地一起调整大小。阅读更多关于 vw here 的信息.

这是一个如何让它发挥作用的例子:

#background {
  background: url("https://images.unsplash.com/photo-1547845737-153b5373560f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2531&q=80") no-repeat;
  background-size: cover;
}

.h-100 {
  height: 20%;
  width: 25vw;
  overflow: hidden;
}

h1 {
  display: block;
  font-size: 6vw;
}

如果你去这个 go codepen，你可以看到我在说什么:

https://codepen.io/MatthewRader/pen/aMrvrx