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

我试图建立一个简单的响应设计。在这一点上，我只是在与头球搏斗。我希望在标题中有一个背景图像，随着屏幕尺寸变大，一个不同的图像出现在它的位置。现在我只想让iPhone 5/SE的屏幕大小正常工作。HTML有一个简单的

div

：

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

当我删除填充设置时，图像将消失。如果我将填充设置为小于5em的值，则会在图像右侧和屏幕右侧之间添加一个空格

• 有人能解释这种行为吗？为什么（看起来）填充物 是否需要设置才能使图像均匀显示
• 如果出于某种原因，它是绝对必要的，我是否总是必须将它设置为一些任意值，比如5em（我通过实验而不是任何逻辑发现的）
• 也许有一个聪明的解决办法，我应该用它来代替

备注：这是一个eBay模板，所以我需要能够在没有任何JavaScript的情况下完成这项工作（他们不允许这样做）。

没有填充/高度 以下面的例子为例：

console.log（`Header height:${Header.clientHeight}px`）
#标题{
背景色：红色；
}
无填充/高度
以下面的例子为例：


console.log（`Header height:${Header.clientHeight}px`）
#标题{
背景色：红色；
}

有人能解释这种行为吗？为什么（似乎）填充设置对于图像的显示是必要的

正如@fcalderan在评论中提到的，默认情况下，您的
div
没有内容和样式，因此它的高度为零。当添加填充（或显式地给它一个
高度
）时，容器将具有正高度并显示您的图像

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

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

这最终意味着，如果容器的宽度与背景图像的宽度成比例，它将不会拉伸以适合容器，因此必须选择与图像大小成比例的单位。在本例中，图像的宽度似乎是
320px
，因此设置
5em
等于
80px
（5*
16px
），即320/4，因此与图像成比例，因此不会看到任何空白

如果确实要将图像拉伸到其容器，请尝试
背景大小：100%
，这样无论比例如何，都可以将图像拉伸到其容器

也许有一个聪明的变通解决方案，我应该用它来代替

不需要解决方法——只需选择正确的CSS样式即可获得所需的效果


进一步阅读：





有人能解释这种行为吗？为什么（似乎）填充设置对于图像的显示是必要的

正如@fcalderan在评论中提到的，默认情况下，您的
div
没有内容和样式，因此它的高度为零。当添加填充（或显式地给它一个
高度
）时，容器将具有正高度并显示您的图像

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

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

这最终意味着，如果容器的宽度与背景图像的宽度成比例，它将不会拉伸以适合容器，因此必须选择与图像大小成比例的单位。在本例中，图像的宽度似乎是
320px
，因此设置
5em
等于
80px
（5*
16px
），即320/4，因此与图像成比例，因此不会看到任何空白

如果确实要将图像拉伸到其容器，请尝试
背景大小：100%
，这样无论比例如何，都可以将图像拉伸到其容器

也许有一个聪明的变通解决方案，我应该用它来代替

不需要解决方法——只需选择正确的CSS样式即可获得所需的效果


进一步阅读：




简言之：您的.header元素为空，默认情况下，以高度为零呈现空div。填充会增加元素的高度，因为这是元素的工作方式。@fcalderan谢谢，这很有意义！那么，这就是实验性地找到一个可以容纳整个图像的填充物的解决方案了吗？退一步：为什么需要一个带背景的空元素？图像a）是否传达了任何信息或b）仅用于装饰目的？在情况a）使用常规img，在情况b）设置特定高度或最小值-height@fcalderan嗯，两者都有一点。。。这是一个漂亮背景上的公司标志。。最终，我想在上面添加电话号码和地址，并使其可点击，但我认为对于版本1，我会保持简单。您也可以为空div指定宽度和高度。简而言之，.header元素为空，默认情况下，空div的高度为零。填充物
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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