Question

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

我有两种尺寸的白色文字对着黑暗的图像。它很好，除了文本位于图像的顶部。我如何控制其位置？

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

在大型视口上，标题和标语各适合一行：

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

在较小的视口上，图像会响应调整大小，文本会分别突破几行：

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

文本大小可能必须在较小的视口宽度处较小，否则它可能会溢出底部（这发生在我身上）：

|--------------------------------|
|                                |
|       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

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

ex：字体大小：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>

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

1 个答案: