为什么填充会影响背景图像是否显示？

Question

我正在尝试构建一个简单的响应式设计。在这一点上，我只是在与标题作斗争。我想在标题中有一个背景图像，随着屏幕尺寸变大，一个不同的图像会出现在它的位置。现在我只想让 iPhone 5/SE 屏幕尺寸工作。 HTML有一个简单的div：

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

我还包括了大家都在谈论的视口元标记：

<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（我通过实验而不是任何逻辑发现）？
• 也许我应该改用一个聪明的解决方案？

P.S.：这是一个 eBay 模板，所以我需要能够在没有任何 JavaScript 的情况下执行此操作（他们不允许这样做）。

Answer 1

没有填充/高度

举个例子：

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 内容（带高度）赋予元素（即文本，imgs）

如果出于某种原因绝对有必要，我是否总是必须将其设置为任意值，例如 5em（我通过实验而不是任何逻辑发现）？

没有。阅读上文。

也许我应该使用一个聪明的变通解决方案？

没有。阅读上文。

附言

默认情况下，具有默认display: block 的元素将具有默认width: 100%，但没有默认高度值。这就是为什么您可以看到边框的宽度为 100%，但高度为 0px。

Answer 2

谁能解释这种行为，以及为什么（似乎）填充设置对于图像的出现是必要的？

正如@fcalderan 在 cmets 中提到的，您的 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