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

Question

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

Aaron创建的fiddle几乎就像我正在搜索的内容。两个问题：

• 缩小视口（宽度低于500px）时的奇怪行为
• 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的问题是因为图像总是像文本一样对齐顶部，这也会在底部添加一些填充以形成文本的基线，以便字母可以在其余部分下垂。

如果您设置python-interactive，则应该像以下一样修复它：

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

对于图像的中心对齐，我个人建议实际使用css <div id="container"> <div id="content"> <img src="//dummyimage.com/600x200/0099cc/fff.png" /> </div> </div>，然后设置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;
}