Как изменить высоту моего изображения заголовка в начальной загрузке? - PullRequest
Новая
       51

Как изменить высоту моего изображения заголовка в начальной загрузке?

0 голосов
/ 01 октября 2019

Я пытаюсь сделать одно из тех изображений заголовка полной ширины (которое занимает около 25% высоты страницы) для этого сайта. Я использую начальный загрузчик для одного из первых раз, и я не могу понять, как изменить высоту изображения / контейнера. Я попытался использовать класс "h-25", а затем также просто попытался сделать встроенный стиль. Я также даже пытался создать полный файл CSS, чтобы перезаписать файл начальной загрузки (установив .container-liquid {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>

Контейнер находится сверху, однако я также включил раздел навигационной панели, если вам нужен некоторый контекст относительно того, где изображениезаканчивается.

1 Ответ

1 голос
/ 01 октября 2019

Я не совсем понимаю, как вы хотите достичь 25% страницы для изображения заголовка, но атрибуты height, закодированные в процентах, нуждаются в родительском элементе div с оговоренной высотой. То же самое относится и к служебным классам Bootstrap, таким как h-25 _

. В этом решении я воссоздал ваш код с фиксированной областью заголовка и фиксированной nav aswell _ В результате получился полностью отзывчивый заголовок и навигация, которые вы можетесм. здесь >>> https://inputforcolor.net/stackover/adamtest/test.html

CSS 

body {
    padding-top: 18rem;
}

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

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

.navbar {
    top: 12rem;
}

HTML 

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