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来缩小jumbotron的字体大小。

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

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"});
    }
});

显然，请根据您的心灵内容使用尺寸/截止点来获得您所追求的外观。

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

Answer 2

我在Codepen上有两个演示，探索缩放文本的概念。

http://codepen.io/denmch/pen/MYZqXB

http://codepen.io/denmch/pen/EaGMYZ/

您可以自行检查CSS并使用该概念，但基本思路是使用常规测量（em，rem，px ...）和vw（视口宽度）的组合来计算字体大小基于测量），它将产生一个响应视口的比例文本大小。这是一个例子：

h1 {
  font-size: calc(1rem + 3.5vw);
}

这个想法也是explored by Mike Riethmuller，他做了很多伟大的工作，甚至显然有关于这个主题的视频。

它被认为是实验性的，但除了Opera Mini之外，你应该做得很好。

如何使h1标签响应背景图像（以及背景，h1标签缩小和扩展）

2 个答案: