Как сделать адаптивную шапку сообщества с аватаром и фоном

При вёрстке сайта для себя часто возникает задача создать красивую шапку профиля или сообщества: большое фоновое изображение и круглый аватар, наложенный на него. Проблема в том, что фиксированные высоты (например, height: 375px) и абсолютное позиционирование ломаются на мобильных устройствах. В этой статье разберём, как переписать стили, чтобы блок стал гибким и корректно отображался на любом экране.

Основные ошибки в исходном коде

Исходный код использует position: absolute для изображений и height: 375px для контейнера. Это приводит к проблемам:

• Фиксированная высота - на маленьких экранах фон может обрезаться или появляться пустое пространство.
• Абсолютное позиционирование - аватар не адаптируется под ширину родителя, и его отступы (margin-top) рассчитаны вручную, что негибко.
• Отсутствие относительных единиц - пиксели не позволяют элементам масштабироваться вместе с окном браузера.

Решение: адаптивная верстка через flexbox и относительные единицы

Чтобы шапка сообщества стала резиновой, откажитесь от абсолютного позиционирования и используйте flexbox в паре с padding и width в процентах. Ниже пример переработанных стилей:

.community-header {
  position: relative;
  width: 100%;
  padding-bottom: 40%; /* соотношение сторон 5:2 */
  overflow: hidden;
  border-radius: 24px;
}

.community-footage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.avatar-wrapper {
  position: absolute;
  bottom: -10%;
  left: 5%;
  width: 25%;
  max-width: 183px;
  aspect-ratio: 1 / 1;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

Пояснение ключевых свойств

• padding-bottom: 40% - задаёт высоту контейнера относительно его ширины. Например, при ширине 1000px высота будет 400px. Это делает блок резиновым.
• object-fit: cover - обеспечивает, чтобы фоновое изображение заполняло контейнер без искажений, обрезая лишнее.
• aspect-ratio: 1 / 1 - гарантирует, что аватар всегда остаётся круглым, независимо от ширины.
• bottom: -10% - смещает аватар вниз относительно родителя, имитируя наложение на фон. Процентное значение адаптируется под размер экрана.

Адаптация под мобильные устройства

Чтобы на узких экранах аватар не становился слишком маленьким, используйте медиа-запросы:

@media (max-width: 600px) {
  .avatar-wrapper {
    width: 30%;
    bottom: -5%;
  }
  .community-header {
    padding-bottom: 50%;
  }
}

Это увеличит относительный размер аватара и изменит пропорции шапки на более высокую. Также не забудьте добавить max-width: 100% для изображений, чтобы они не вылезали за пределы контейнера.

Проверка результата

После замены стилей протестируйте блок в инструментах разработчика браузера (режим адаптивности). Убедитесь, что:

• Фон не обрезается по краям и сохраняет центр композиции.
• Аватар не наезжает на текст или границы.
• При изменении ширины окна все элементы плавно перестраиваются.

Такой подход делает шапку сообщества полностью адаптивной без использования JavaScript - только средствами CSS. Вы можете легко менять пропорции, подставлять другие изображения и управлять отступами через проценты.