Целевая страница, созданная с помощью Bootstrap 4

Question

Мне сделали целевую страницу, которая довольно проста. Но проблема в том, что Banner Photo заполоняет страницу, и мне нужно прокрутить, чтобы увидеть завершенную страницу. Можно ли настроить HTML и / или CSS для уменьшения высоты фотографии баннера примерно на треть?

Answer 1

Есть много разных подходов к этому. Я просто покажу вам одну, которая должна идеально соответствовать вашей текущей странице и потребностям.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 d-flex align-items-end overflow-hidden banner-image-container">
    <img class="img-responsive" src="img/top-banner.jpg" width="100%">
</div>

(внутри вашего <style тега:)

.overflow-hidden {
    overflow: hidden;
}

.banner-image-container {
    max-height: 400px;
}

Я ограничил контейнер вокруг вашего изображения максимальной высотой 400 пикселей. Поскольку ваше изображение больше этого, я добавил overflow: hidden; в контейнер, чтобы он обрезал оставшуюся часть изображения. Теперь ваш главный фокус на изображении будет здание, я думаю. Так что я переместил все это наверх с d-flex align-items-end.