Не работающее пропорциональное масштабирование и неправильное поведение шапки

Question

Есть фоновая картинка для сайта и дополнительные. Главная картинка

Дополнительные - логотип

и гамбургер

Привожу html и css код

body {
  margin: 0;
  padding: 0;
}

.header {
  background-image: url('https://i.stack.imgur.com/PxBpn.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100vh;
  display: block;
  /*position: relative;*/
  /* resize */
  overflow: hidden;
  resize: horizontal;
  /* resize */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
}

.logo {
  width: 258px;
  height: 40px;
  display: block;
  transition: 0.2s ease;
}

.logo:hover {
  opacity: 0.7;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.burger {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 40px;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burger svg {
  transition: 0.2s ease;
}

.burger:hover {
  background: #f0f0f0;
}

.burger:hover svg {
  fill: #555;
}

.header::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(810 / 1440 * 100%);
}


/*
.block img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
*/

<header class="header">
  <div class="container">
    <div class="navigation">
      <a href="#" class="logo">
        <img src="https://svgur.com/i/jAx.svg" alt="Logo" />
      </a>
      <div class="burger">
        <svg width="18" height="13" viewBox="0 0 18 13">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V1.8H18V0H0ZM0 5.4V7.2H18V5.4H0ZM0 12.6V10.8H18V12.6H0Z" />
        </svg>
      </div>
    </div>
  </div>
</header>

Но в результате в полноэкранном виде шапка с логотипом и бургером не отображаются,
При масштабировании логотип и бургер оказываются внизу страницы
и само фоновое изображение не масштабируется

Помогите устранить эти 3 проблемы. Код для пропорционального масштабирования приведен на Средства пропорционального масштабирования - пытался его использовать, но столкнулся с 3-мя вышеобозначенными проблемами. Объясните причины возникших проблем.

Answer 1

body {
  margin: 0;
  padding: 0;
}

.header {
  background-image: url('https://i.stack.imgur.com/PxBpn.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  display: block;
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
}

.logo {
  width: 258px;
  height: 40px;
  display: block;
  transition: 0.2s ease;
}

.logo:hover {
  opacity: 0.7;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.burger {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 40px;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.burger svg {
  transition: 0.2s ease;
}

.burger:hover {
  background: #f0f0f0;
}

.burger:hover svg {
  fill: #555;
}

.header::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(810 / 1440 * 100%);
}

<header class="header">
  <div class="container">
    <div class="navigation">
      <a href="#" class="logo">
        <img src="https://svgur.com/i/jAx.svg" alt="Logo" />
      </a>
      <div class="burger">
        <svg width="18" height="13" viewBox="0 0 18 13">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V1.8H18V0H0ZM0 5.4V7.2H18V5.4H0ZM0 12.6V10.8H18V12.6H0Z" />
        </svg>
      </div>
    </div>
  </div>
</header>

Объясните причины возникших проблем.

Вы не пытаетесь разобраться что почему случается, не изучили начальные знания по вёрстке и не работаете с "девтулом" браузера.

В прошлом ответе я показал вам как можно добавить блоку пропорциональное изменение размеров, при помощи псевдоэлемента с padding-top равным соотношению ширины и высоты какого-то элемента, в вашем случае фоновой картинки, чей размер 1440x810px.

Т.к. суть этого способа заключается в том, что внутри блока ничего не должно растягивать его по высоте, только ::before {padding-top: ratio}, то все элементы внутри него должны иметь position: absolute; относительно масштабируемого блока (родителя).

А ещё у родителя стоит overflow: hidden.

Если бы вы пользовались девтулом или же имели начальные знания, то решили бы первые две "проблемы".

По поводу третьей.

Опять же всё упирается в начальные знания, а именно в знаниях единиц измерения в CSS.

Вы установили блоку height: 100vh, знаете как ведёт себя vh? Оно выдаст блоку 100% высоты вьюпорта (окна браузера, фрейма и т.п.).

Ещё в прошлом ответе я установил блоку возможность изменять размер resize: horizontal, чтобы продемонстрировать решение с масштабированием.

Вы же впихнули его как готовое решение, что не правильно.

А ответ на решение проблемы такой:

width: 100% - это ровно такая же ширина как и у родителя.
height: 100vh - это ровно такая же высотка как у вьюпорта.
cover - будет растягивать картинку пропорционально так, чтобы не было пустот.

Из-за наличия у header height: 100vh ваша картинка заполнялась так, чтобы быть 100% по высоте, а данная высота не будет изменяться при resize, так что ваша картинка визуально не масштабируется.
Но как только вы начнёте изменять высоту окна браузера, то увидите, что и картинка будет масштабироваться.

БЛОГ НА HUSL

Не работающее пропорциональное масштабирование и неправильное поведение шапки

Ответы (1 шт):