Вопрос или проблема
Что происходит, так это то, что когда размер экрана уменьшается ниже 435px, заголовок (где установлено фоновое изображение) отображает черные полосы сверху и снизу изображения. Это обычно происходит, когда изображение не полностью закрывает высоту контейнера заголовка. В результате появляются пустые пространства, и поскольку цвет фона по умолчанию черный (или темный), эти пространства заполняются черными полосами.
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand text-lowercase" href="#inicio">
<span style="color:#688fc8">evolve</span> <span style="color:white;">studio</span>
<!-- <img src="assets/img/WhatsApp_Image_2024-09-24_at_21.35.08-removebg-preview.png" alt="Ícone do WhatsApp" id="logo_ginasio"> -->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Переключить навигацию">
Меню
<i class="fas fa-bars ms-1"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#serviços">Услуги</a></li>
<li class="nav-item"><a class="nav-link" href="#quemsomos">Кто мы</a></li>
<li class="nav-item"><a class="nav-link" href="#equipa">Команда</a></li>
<li class="nav-item"><a class="nav-link" href="#horario">Расписание</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.regyfit.com/regiprof_wod/registo/novo_registo.php?id_box=2154&lang=pt&code=c626da78178573f8075b82505c63191a" target="_blank">Записи</a></li>
</ul>
</div>
</div>
</nav>
<!-- Мастхэд -->
<header class="masthead">
<div class="container">
<div class="masthead-heading text-uppercase">Добро пожаловать</div>
<div class="masthead-subheading">Устали от отсутствия необходимой поддержки? <br> Пришло время познакомиться со студией Evolve.</div>
<a id="whatsapp-banner" href="https://api.whatsapp.com/send?phone=+351915705137&text=Olá! Gostaria de saber mais informações sobre os serviços que o Evolve Studio oferece." target="_blank">
<p id="whatsapp-text">Свяжитесь с нами</p>
<img src="assets/img/whatsapp.webp" alt="Ícone do WhatsApp">
</a>
</div>
</header>
/* Общие стили */
body, html {
margin: 0;
padding: 0;
overflow-x: hidden; /* Это предотвращает горизонтальные переполнения */
}
.navbar {
width: 100%;
}
/* Изменяет цвет ховера для ссылок навигационной панели */
.navbar-nav .nav-link:hover {
color: #688fc8 !important; /* Цвет при наведении на ссылку */
}
/* Также изменяет цвет при активной или выбранной ссылке */
.navbar-nav .nav-link.active {
color: #688fc8 !important; /* Цвет для активной ссылки */
}
/* Если нужно скорректировать фокус */
.navbar-nav .nav-link:focus {
color: #688fc8 !important; /* Цвет при фокусе на ссылке */
}
@media (max-width: 768px) {
.navbar-collapse {
justify-content: center;
}
}
.container, .header, .masthead {
max-width: 100%;
box-sizing: border-box; /* Обеспечивает включение padding и border в общую ширину */
}
/* Стили заголовка/мастхэда */
header.masthead {
background-image: url("../assets/img/capa.webp") !important;
background-size: cover !important; /* Обеспечивает, чтобы изображение покрывало весь заголовок */
background-position: center center !important; /* Центрирует изображение горизонтально и вертикально */
background-repeat: no-repeat !important; /* Предотвращает повторение изображения */
padding-top: 100px !important;
padding-bottom: 100px !important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
min-height: 75vh; /* Устанавливает минимальную высоту */
position: relative;
}
.masthead-heading{
font-size: 3rem !important;
}
.masthead-subheading {
font-size: 1.8rem !important;
position: relative !important;
bottom: 25px !important
}
/* Медиа-запрос для экранов меньше 992px */
@media (max-width: 992px) {
.masthead {
background-size: contain !important; /* Это гарантирует, что изображение подстраивается под заголовок */
background-position: center center !important; /* Центрирует изображение и позиционирует его вверху */
background-repeat: no-repeat !important;
padding-top: 70px !important;
padding-bottom: 70px !important;
min-height: 60vh !important; /* Уменьшает минимальную высоту */
}
.masthead-heading {
font-size: 2.7rem !important;
}
.masthead-subheading {
font-size: 1.5rem !important;
position: relative !important;
bottom: 30px !important
}
}
/* Медиа-запрос для экранов меньше 850px */
@media (max-width: 850px) {
.masthead {
background-size: contain !important; /* Это гарантирует, что изображение подстраивается под заголовок */
background-position: center center !important; /* Центрирует изображение и позиционирует его вверху */
background-repeat: no-repeat !important;
padding-top: 70px !important;
padding-bottom: 70px !important;
min-height: 60vh !important; /* Уменьшает минимальную высоту */
}
.masthead-heading {
font-size: 2.4rem !important;
}
.masthead-subheading {
font-size: 1.2rem !important;
position: relative !important;
bottom: 45px !important
}
}
/* Медиа-запрос для экранов меньше 768px */
@media (max-width: 768px) {
.masthead {
background-size: contain !important; /* Это гарантирует, что изображение подстраивается под заголовок */
background-position: center center !important; /* Центрирует изображение и позиционирует его вверху */
background-repeat: no-repeat !important;
padding-top: 40px !important;
padding-bottom: 40px !important;
min-height: 60vh !important; /* Уменьшает минимальную высоту */
}
.masthead-heading {
font-size: 1.8rem !important;
}
.masthead-subheading {
font-size: 1rem !important;
position: relative !important;
bottom: 15px !important
}
}
/* Медиа-запрос для экранов меньше 576px */
@media (max-width: 576px) {
.masthead {
background-size: contain !important; /* Это сохраняет изображение подстраивающимся под заголовок */
background-position: center center !important; /* Позиционирует изображение вверху */
background-repeat: no-repeat !important;
padding-top: 30px !important;
padding-bottom: 30px !important;
min-height: 50vh !important; /* Дополнительная настройка для смартфонов */
}
.masthead-heading {
font-size: 1.5rem !important;
}
.masthead-subheading {
font-size: 0.9rem !important;
}
}
@media (max-width: 435px) {
.masthead {
object-fit: auto !important;
background-size: cover !important; /* Гарантирует, что изображение покрывает всю область */
background-position: center center !important; /* Центрирует изображение горизонтально и вертикально */
background-repeat: no-repeat !important; /* Предотвращает повторение изображения */
padding: 0 !important; /* Удаляет отступ */
height: auto !important; /* Позволяет заголовку подстраиваться под содержимое */
min-height: 50vh !important; /* Устанавливает минимальную высоту */
}
.masthead-heading {
font-size: 1rem !important; /* Уменьшает размер заголовка */
}
.masthead-subheading {
font-size: 0.7rem !important; /* Уменьшает размер подзаголовка */
position: relative !important;
bottom: 20px !important;
}
}
Я попробовал множество вариантов и решений, но пытаюсь разобраться.
Ответ или решение
Чтобы устранить проблему появления черных полос над и под изображением в заголовке при ширине экрана менее 435 пикселей, необходимо внести изменения в стили CSS. Проблема, как правило, возникает из-за того, что изображение не полностью покрывает высоту контейнера заголовка, и, следовательно, появляются пустые области, которые окрашиваются в цвет фона (темный цвет).
Вот несколько шагов, которые вы можете предпринять для решения этой проблемы:
1. Изменение свойств фона заголовка
В вашем CSS уже определены свойства для класса .masthead, но на этапе минимальной ширины у вас указаны некоторые параметры, которые могут не сработать должным образом. Убедитесь, что ваша фоновая картинка действительно масштабирована для покрытия всей области заголовка.
Вот как это можно сделать:
@media (max-width: 435px) {
.masthead {
background-size: cover !important; /* Убедитесь, что изображение полностью покрывает заголовок */
background-position: center center !important; /* Центрируем изображение */
background-repeat: no-repeat !important; /* Запрещаем повторение изображения */
padding: 0 !important; /* Уберите отступы сверху и снизу */
min-height: 100vh !important; /* Увеличиваем минимальную высоту заголовка */
}
.masthead-heading {
font-size: 1.2rem !important; /* Увеличиваем размер заголовка для мобильных устройств */
}
.masthead-subheading {
font-size: 0.8rem !important; /* Увеличиваем размер подзаголовка */
position: relative !important;
bottom: 15px !important; /* Сдвиг подзаголовка */
}
}2. Убедитесь в правильности изображения
Проверьте, чтобы изображение, которое вы используете в качестве фона, имело достаточно высокое разрешение для его корректного отображения на экранах меньшего размера. Если изображение имеет слишком низкое разрешение или не подходит по формату, это может усугублять ситуацию.
3. Убедитесь в корректности HTML структуры
Убедитесь, что в вашем HTML-коде все открывающиеся и закрывающиеся теги совпадают. Консистентная структура поможет избежать неожиданных проблем рендеринга.
4. Контроль высоты с помощью JavaScript (при необходимости)
Если проблема сохраняется и после внесения изменений в CSS, вы можете попробовать динамически изменять высоту заголовка с помощью JavaScript на экранах меньшего размера. Пример кода:
if (window.innerWidth < 435) {
document.querySelector('.masthead').style.height = '100vh';
}Этот код устанавливает высоту заголовка в 100vh (100% высоты видимой области экрана) при ширине экрана менее 435 пикселей.
Заключение
Применив указанные изменения, вы должны устранить проблему с черными полосами над и под изображением в заголовке. Запустите сайт на устройствах с шириной экрана менее 435 пикселей и проверьте, выполняются ли ограничения по высоте и масштабированию изображения. Если проблема все еще не решена, вам может потребоваться проверить другие элементы, влияющие на высоту контейнера заголовка, чтобы выявить возможные конфликты в стилях.
Надеюсь, это поможет вам решить вашу проблему!