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

Question

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

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

• 缩小视口(viewport)(宽度低于 500 像素)时的奇怪行为
• 位置:固定；

我能够重现 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:在狭窄的视口(viewport)中，图像在右侧被截断(未居中)，并显示水平滚动条。

---

作为旁注，有人可以告诉我 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%;
}