如何居中裁剪全屏背景图像

Question

Stack Overflow 似乎充满了类似的问题，但我还没有为我的用例找到令人满意的答案。基本上，我的首页顶部需要一个响应式的全屏背景图像。意味着，缩小视口会导致裁剪，而不是拉伸；图像应该居中。我想避免使用 JS。

Aaron 创建了一个fiddle，几乎看起来就像我正在寻找的东西。两个问题：

• 缩小视口时的奇怪行为（宽度低于 500 像素）
• position: fixed;

我能够为容器复制solution of Bryce Hanscomb and Gabriela Gabriel（请参阅my fiddle）：

但我未能将其扩展到全屏。这是我的代码（见fiddle）：

HTML：

<div id="background">
    <img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>

CSS：

div#background {
  background-color: orange;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: -1;
}
img {
  left: 50%;
  position: relative;
  transform: translate(-50%, 0);
  min-height: 100%;
  min-width: 100%;
}

问题 #1： 图片未占据其父 div 的全部高度（min-height 设置为 100%）。

问题#2 + #3：在狭窄的视口中，图像在右侧被截断（未居中），并显示水平滚动条。

---

作为旁注，有人可以告诉我where those 4 pixels come from吗？

Answer 1

如果您在图像上使用position:absolute，您的图像将填满整个空间，也不会出现不居中的问题

div#background {
  background-color: orange;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: -1;
}
img {
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  min-height: 100%;
  min-width: 100%;
}

Answer 2

底部 4px 的问题是因为图像总是像文本一样与顶部对齐，这也会在底部添加一些填充以作为文本的基线，以便字母可以悬挂在其余部分下方。

如果你设置vertical-align: bottom 它应该像这样修复它：

h1 {
  text-align: center;
}
div#container {
  background-color: black;
  height: 200px;
  width: 100%;
  margin: 50px auto;
}
div#content {
  background-color: orange;
  min-width: 100%;
  overflow: hidden;
}
img {
  left: 50%;
  position: relative;
  transform: translate(-50%, 0);
  vertical-align: bottom;
}

<div id="container">
  <div id="content">
    <img src="//dummyimage.com/600x200/0099cc/fff.png" />
  </div>
</div>

对于图像的居中对齐，我个人建议实际使用 css background-image，然后像这样设置 background-position：

div#background {
  background-color: orange;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  background: url(//dummyimage.com/600x200/0099cc/fff.png) center center no-repeat;
  background-size: cover;
}

<div id="background">
</div>