没有填充/高度

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;
  }
}

当我删除填充设置时，图像消失。如果我将padding设置为小于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内容（带有高度）赋予元素（即文本，img s）

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

不。阅读以上。

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

不。阅读以上。

PS

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

Answer 2

任何人都可以解释这种现象吗？为什么（似乎）填充设置对于图像的均匀显示是必需的？

如@fcalderan的注释中所述，默认情况下，您的div不包含内容和样式，因此高度为零。添加填充（或明确给其填充height）时，容器的高度将为正，并显示图像。

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

这不是任意的-它取决于图像的尺寸和您选择的CSS样式。在您的示例中，您设置了一个background-size: contain，它“在不裁剪或拉伸图像的情况下将图像尽可能缩放。”

这最终意味着，如果容器比背景图像成比例地宽，则容器将无法拉伸以适合容器，因此必须选择与图像大小成比例的单位。在这种情况下，您的图片似乎宽320px，因此设置5em等于80px（5 * {16px），为320/4-因此与图片，因此您不会看到任何空格。

如果您确实希望将图像拉伸到其容器中，请尝试background-size: 100%，它将不管其比例如何将图像拉伸到其容器中。

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

无需任何解决方法-只需选择正确的CSS样式即可获得所需的效果。

进一步阅读：

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

2 个答案:

没有填充/高度

具有填充/高度

回答您的问题