html - 如何使 h1 标签响应背景图像(与背景一起，h1 标签收缩和展开)

Question

我在 jumbotron 中有一个背景图片以及 h1 标签。当我调整图像大小时，h1 标签没有调整大小，而是与背景中的图像重叠

.jumbotron h1 {
  font-size: 45px;
}
.jumbotron {
  background-image: url("header.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-left: 48px;
  padding-right: 48px;
}

<div class="container">
  <!-- Jumbotron Header -->
  <div>
    <header class="jumbotron">
      <h1> Hello, how May I help you.</h1>
      <h1>Happy to help you<br>
       <img src="prime.png" class="img-responsive" alt="flower">
	</header>
 <div> 
</div>

Answer 1

您将不得不使用 javascript 来缩小超大屏幕的字体大小。

如果您当前正在调整整个窗口的大小以缩小图像，那么您只需添加以下内容:

window.addEventListener('resize', function() {

    var h1 = document.getElementById("jumbo-h1");  //I made up an id for simplicity
    var width = document.getElementsByClassName("jumbotron")[0].offsetWidth;

    if (width > 600) {
       h1.style['font-size'] = "45px";
    } else if (width > 400 && width <= 600) {
       h1.style['font-size'] = "35px";
    } else {
       h1.style['font-size'] = "25px";
    }
}

如果您使用的是 jQuery，这会变得更加简洁:

$(window).on('resize',function(){
    var $h1 = $(".jumbotron h1");         //note that ID is not needed
    var width = $(".jumbotron").width();
    if (width > 600) {
        $h1.css({"font-size": "45px"});
    } else is (width > 400 && width <= 600) {
        $h1.css({"font-size": "35px"});
    } else {
        $h1.css({"font-size": "25px"});
    }
});

显然，根据您的喜好调整尺码/分界点以获得您想要的外观。

如果您以其他方式调整超大屏幕的大小，只需将我提供的处理程序中的代码移动到它自己的函数中，并在需要时调用它(同时还传递对窗口调整大小处理程序的引用)