在背景圖像上寫文字沒有響應

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的信息

以下是如何使其工作的示例：

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

如果你去這個代碼，你可以看到我正在談論的行動：

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屏幕和（max-width：#px）只會影響到最大寬度的字體大小。