Html 如何在引导中更改标题图像的高度？

我正在尝试为这个网站制作一个全宽标题图片（占页面高度的25%）。我第一次使用bootstrap，但我不知道如何更改图像/容器的高度。我尝试过使用“h-25”类，然后也尝试过使用内联样式。我甚至还尝试创建一个完整的CSS文件来覆盖引导文件（通过设置.container fluid{height:25%；}）。无论我做什么，我都不能使图像改变高度

        <div class="container-fluid p-0 h-25">
            <img src="Photos/2019 SB Photos/AudienceSet+Tvs_darkened.JPG" class="img-fluid" height="25%;" alt="Responsive image">
        </div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">SSS</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">The Party<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Current Stadium</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">RSVP</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Stadium History
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">2017 Stadium</a>
                            <a class="dropdown-item" href="#">2018 Stadium</a>
                            <a class="dropdown-item" href="#">2019 Stadium</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

---

容器位于顶部，但是我还包括了导航栏部分，以防您需要一些关于图像结束位置的上下文。

我不完全清楚如何为页眉图像获得25%的页面，但是

高度

按百分比编码的属性需要一个具有规定高度的父

div

。这同样适用于引导实用程序类，如

h-25

_

在这个解决方案中，我用一个固定的标题区域和固定的

nav

重新创建了您的代码。结果是一个完全响应的标题和nav，您可以在这里看到>>>

CSS

HTML

我看不到包含图像的父级

div

的顶部u除了

容器流体

（我从您的问题文本中假设）之外，它还有其他类吗？检查img上的外部div是否没有限制/强制其大小或其他什么？另外，是的，请提供更完整的代码引导实用程序，如

h-25

将只在与父级

div

@inputforcolor的高度相关的情况下工作。不，它只是一个流体容器（抱歉，不确定我为什么没有粘贴）

body {
    padding-top: 18rem;
}

.header {
    height: 12rem;
    width: 100%;
    position: fixed;
    top: 0;
}

.headerImage { 
    height: 12rem;
    width: 100%;
}

.navbar {
    top: 12rem;
}

<div class="container-fluid header">
    <div class="row">
       <img class="headerImage" src="stadiumLarge.jpg" alt="stadium header">
    </div><!-- /.row -->
</div><!-- /.container -->

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">