如何使轮播字幕具有响应性？

Question

我一直在学习一些在线课程和教程，以更好地理解如何使用html / css特别是Bootstrap创建网站。

但是，我一直无法克服的一个问题是-我无法使轮播字幕具有响应性-它只是不会对调整窗口大小做出反应。

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

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

考虑添加一个规则，以使轮播项目变为可弯曲的容器：

dataDir

删除.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查询来处理字体溢出框的问题（因为容器已完全定位）。

jsFiddle