Целевая страница, созданная с помощью Bootstrap 4
У меня была создана целевая страница с довольно простым макетом. Но проблема в том, что фотография баннера заполняет страницу, и мне нужно прокрутить страницу, чтобы увидеть заполненную страницу. Могу ли я внести изменения в HTML и / или CSS, чтобы уменьшить высоту фотографии баннера примерно на треть?
Извините, я думал, что Bootstrap - это стандартный фреймворк, и поэтому любой, кто его знает, знает решение. Если, конечно, он есть. Я бы не знал, какой фрагмент кода вставить.
Bootstrap - довольно популярный фреймворк, но мы не знаем вашей точной настройки. Вы можете создать фрагмент кода заголовка, который будет полезен.
@Carl Bootstrap - это стандартный фреймворк, но когда кто-то что-то проектирует в Bootstrap, он может вручную переопределить CSS - он не охватывает все.
Хорошо, спасибо, Сэм. Я не могу прикрепить файлы и недостаточно места для вставки всего кода. Мне нужно посмотреть, смогу ли я забрать его в Google. Еще раз спасибо.
Поможет ли это в качестве стартера? <Div class = "col-lg-12 col-md-12 col-sm-12 col-xs-12 d-block"> <img class = "img-responsive" src = "img /top-banner.jpg "width = " 100% "> </div>
Изображение должно быть на заднем фоне вашего заголовка или чего-то в этом роде, верно?
Привет, Пол, из того, что я вижу, верхняя строка сайта, содержащая логотип и контактные данные под ним, является изображением, на которое я ссылаюсь, находится под блоком <head> <\ head> в html, но находится в теле. Под изображением в строке находятся еще 4 изображения меньшего размера, за которыми следует текст. Я вставлю основной код в следующий комментарий.
Избавьтесь от этой мысли, слишком много кода!
Возможно, вы захотите создать скрипку на чем-нибудь вроде jsfiddle.net. Вы также можете добавить библиотеку начальной загрузки в левой части страницы.
Так глупо с моей стороны! 1drv.ms/f/s!AlLyoyc8XoHxk5d2pc16TXAe2BFmhw ссылка на один диск на файлы
Не беспокойтесь, все мы начали некоторое время назад. В качестве ответа я добавил один возможный подход. Надеюсь, это соответствует вашим потребностям.
Ответы 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.
Первоклассный Пол. Большое вам спасибо. Оценил.
Совершенно без проблем, рад, что помог. Если это «правильный ответ» на ваш вопрос, вы можете отметить его зеленой галочкой рядом с моим ответом.
Нам нужен код, чтобы помочь вам здесь.