css - 使用 Bootstrap，如何调整英雄图像中文本的位置？

Question

我的目标是在 Bootstrap 中创建英雄形象。在网上搜索后，我发现了几个不同的例子。我复制了这个例子:bootply example

我有两种尺寸的白色文本与深色图像相对应。没关系，除了文本位于图像的顶部。我如何控制它的位置？

我希望结果在不同的视口(viewport)宽度上看起来不错。这是我想要的模式。

在大视口(viewport)上，标题和标语各占一行:

|----------------------------------------------------|
|                                                    |
|                                                    |
|            Math Achievement Tutoring               |
|                                                    |
|                                                    |
|            Begin your math adventure!              |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|                                                    |
|----------------------------------------------------|

在较小的视口(viewport)上，图像会相应地调整大小，并且文本会每行分开几行:

|--------------------------------|
|                                |
|       Math Achievement         |
|           Tutoring             |
|                                |
|        Begin your math         | 
|           adventure!           |
|--------------------------------|

文本大小可能必须在较小的视口(viewport)宽度下较小，否则它可能会溢出底部(这发生在我身上):

|--------------------------------|
|                                |
|       Math Achievement         |
|           Tutoring             |
|                                |
|-----  Begin your math ---------| 
           adventure!           

一个问题:位置应该通过px/em控制，还是通过img大小的百分比控制？我该怎么做？

我尝试过的:英雄图片 HTML/CSS:

HTML:

  <div class="hero-unit">
    <h1 class="text-center">Math Achievement Tutoring</h1>
    <h2 class="text-center">Begin your math adventure!</h2>

  </div>

在 custom.css 中:

.hero-unit {
    background-image:url('../images/fog.jpg');
    background-size:cover;
    background-color: #EEEEEE;
    height:500px;

  }
.hero-unit h1 {
    color: #FFFFFF;
    font-size: 60px;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0;
}
.hero-unit h2 {
    font-size: 25px;
    color: #FFFFFF;

}

Answer 1

您可以使用与屏幕 View 宽度相关的字体大小

例如:字体大小:5vw；所以当窗口调整大小时，字体将根据窗口宽度调整大小并且不会溢出

.hero-unit {
    background-image:url('../images/fog.jpg');
    background-size:cover;
    background-color: #000000;
    height:500px;

  }
.hero-unit h1 {
    color: #FFFFFF;
    font-size:8vw;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0;
}
.hero-unit h2 {
    font-size: 5vw;
    color: #FFFFFF;

}

<div class="hero-unit">
    <h1 class="text-center">Math Achievement Tutoring</h1>
    <h2 class="text-center">Begin your math adventure!</h2>

  </div>