Почему отступ влияет на фоновое изображение или нет?

Question

Я пытаюсь создать простой адаптивный дизайн.На данный момент я просто борюсь с заголовком.Мне бы хотелось, чтобы в заголовке было фоновое изображение, и по мере увеличения размера экрана на его месте появлялось другое изображение.Сейчас я просто хочу заставить работать экран iPhone 5 / SE .HTML имеет простой div:

<div class="header"></div>

И я включаю метатег viewport, о котором все говорят:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS имеет следующее:

* {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 320px) {
  .header {
    padding: 5em;
    background: url(images/header-320.png) no-repeat top left;
    background-size: contain;
  }
}

Когда я удаляю настройку заполнения, изображение исчезает.Если я установлю отступ менее 5em, он добавляет пробел между правой стороной изображения и правой стороной экрана.

• Может кто-нибудь объяснить это поведение и почему (кажетсячто) настройка отступа необходима для того, чтобы изображение даже появлялось?
• Если по какой-то причине это абсолютно необходимо, всегда ли мне нужно устанавливать для него произвольное значение, например 5em (которое я нашел в результате экспериментов, а не какой-либо логики)?
• Может бытьесть разумное обходное решение, которое я должен использовать вместо этого?

PS: это для шаблона eBay, поэтому я должен быть в состоянии сделать это без какого-либо JavaScript (они не позволяют этого).

Answer 1

Кто-нибудь может объяснить это поведение, и почему (кажется, что) настройка отступа необходима для того, чтобы изображение даже появилось?

Как уже упоминалось в комментариях @fcalderan, вашdiv по умолчанию не имеет содержимого и стилей, поэтому будет иметь нулевую высоту.При добавлении отступа (или явном указании height) контейнер будет иметь положительную высоту и будет отображать ваше изображение.

Если это абсолютно необходимо по какой-либо причине, всегда ли я долженустановить какое-то произвольное значение, например 5em (которое я нашел в результате экспериментов, а не какой-либо логики)?

Это не произвольно - это зависит от размеров вашего изображения и стили CSS, которые вы выбираете.В вашем примере вы устанавливаете background-size: contain, который «масштабирует изображение как можно большего размера без обрезки или растяжения изображения».

В конечном итоге это означает, что если ваш контейнер пропорционально шире, чем фоновое изображение, он не будет растягиваться, чтобы соответствовать контейнеру, поэтому вы должны выбрать единицы, которые пропорциональны размеру изображения.В этом случае ваше изображение имеет ширину 320px, поэтому настройка 5em соответствует 80px (5 * 16px), что составляет 320/4 - таким образом, оно пропорционально изображению, поэтому вы не будетеувидеть любые пробелы.

Если вы хотите, чтобы изображение растягивалось до его контейнера, попробуйте background-size: 100%, что должно растянуть изображение до его контейнера независимо от пропорций.

Возможно, есть умная работарешение, которое я должен использовать вместо этого?

Обходной путь не требуется - это просто вопрос выбора правильных стилей CSS, чтобы получить желаемый эффект.

---

Дополнительная литература:

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
• https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

Без отступов / высота

Возьмите следующий пример:

console.log(`Header height: ${header.clientHeight}px`);

#header {
  background-color: red;
}

<div id="header"></div>

Я установил для элемента #header значение background-color: red, но красного цвета вы не видите, верно?Поскольку высота элемента по умолчанию равна 0px, поэтому элемент практически не виден .

С отступом / высотой

Теперь рассмотрим этот пример с отступом:

console.log(`Header height: ${header.clientHeight}px`);

#header {
  background-color: red;
  padding: 5em;
}

<div id="header"></div>

Обратите внимание, что высота сейчас 160px, и вы можете увидеть большую кучу красного.

Чтобы ответить на ваш вопрос

Может кто-нибудь объяснить это поведение, и почему (кажется, что) настройка отступа необходима для того, чтобы изображение даже появлялось?

Заполнение не требуется.Но высота элемента равна.

Чтобы задать высоту для элемента, вы можете:

• Установить height
• Установить padding-top и /или padding-bottom
• Передать HTML-контент (с высотой) элементу (т. е. текстам img s)

Если это по какой-либо причине абсолютно необходимо,всегда ли мне нужно устанавливать какое-либо произвольное значение, например 5em (которое я нашел экспериментально, а не какую-либо логику)?

Нет.Читайте выше.

Может быть, есть разумное решение для обходного пути, которое я должен использовать вместо этого?

Нет.Читайте выше.

PS

По умолчанию элементы со значением по умолчанию display: block будут иметь значение по умолчанию width: 100%, но без значения высоты по умолчанию.Вот почему вы можете видеть ширину границы 100% по ширине, но 0px по высоте.