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

Answer 2

平板电脑

 @media screen and (max-width: 1024px){
 h1 { font-size:SIZETHATFITS}}

电话

 @media screen and (max-width: 480px){
 h1 { font-size:SIZETHATFITS}}

@media屏幕和（最大宽度：#px）只会影响最大尺寸的字体大小。

在背景图片上写文字没有反应

2 个答案: