html - 如何使我的轮播标题响应？

Question

我一直在参加一些在线类(class)和教程，以更好地了解如何使用 html/css 和 bootstrap 创建网站。

但是我一直无法克服的一个问题是 - 我无法使轮播标题响应 - 它不会对窗口大小的调整使用react。

HTML:

<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="0"></li>
<li data-target="#slides" data-slide-to="0"></li>
</ul>
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="IMG/TEAL ORIGAMI.jpeg">
        <div class="carousel-caption">
            <h1 class="display-2">ICE3DESIGN</h1>
            <h3>Bespoke Web Design</h3>
            <button type="button" class="btn btn-outline-light btn-lg">VIEW PORTFOLIO</button>
            <button type="button" class="btn btn-primary btn-lg">ENQUIRE NOW</button> 
        </div>
    </div>
    <div class="carousel-item">
        <img src="IMG/background2.png">
    </div>
    <div class="carousel-item">
        <img src="IMG/background3.png">
    </div>
</div>

CSS:

.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 10px #000;
}  
.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;   
}   

我希望标题相应地调整大小并出现在轮播图像的中心，但实际发生的是当浏览器调整大小时标题保持相同大小并且太大而且不居中。

Answer 1

到目前为止，您还没有提供到现场网站的链接，这让事情变得有点困难。但是，我确实注意到了测试代码的一些事项。

考虑添加一条规则，使轮播元素成为 flex 容器:

.carousel-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

删除 carousel-caption 的翻译。因为兄弟图像是绝对定位的(未显示)，所以您也必须在此处保留绝对定位。不过，也许 background-image 会让生活更轻松。

.carousel-caption {
  position: absolute;
  /* top: 50%; */
  /* transform: translateY(-50%); */
}

有了这些规则，您至少可以实现 .carousel-caption 的垂直居中。然后您可以添加适当的 @media 查询来处理溢出框的字体(因为容器是绝对定位的)。

jsFiddle