如何将背景图像的中心与包含 div 的左侧对齐？ [复制]答案

【问题标题】：How can I align the center of a background image with the left side of it's containing div? [duplicate]如何将背景图像的中心与包含 div 的左侧对齐？ [复制]
【发布时间】：2018-11-01 18:46:19
【问题描述】：

通过background-position 将background-image 的中心与div 的中心对齐非常容易。我看不到任何方法可以将background-image 的中心与 div 的左侧对齐。

我尝试过为background-position 使用各种不同的百分比，但我无法看到 0-100% 之外的百分比是如何计算的。我知道 0% 是背景左侧，div 左侧，100% 是背景右侧，div 右侧。但什么是 -50% 或 200%？我认为它是通过两个项目的宽度的比率来调整的，这在范围之外是毫无意义的。 I made this 试试看我能不能搞清楚。

还有其他建议可以让background-image 的中心与它所在的 div 的左侧对齐吗？

【问题讨论】：

让我知道副本是否足够详细以帮助您计算出...您会找到所有需要的关系和公式。

标签： css background-image background-position

【解决方案1】：

如果我理解正确 - 您希望将背景图像中心对齐到 div 的左侧。那么不妨试试这个！

<div class="yourdiv" >
 <img class="yourbg" src="" >
</div>

<style>
*{
  margin: 0; padding: 0;
}
.yourdiv{
  width: 500px; height: 300px;
  overflow: hidden;
  position: relative;
}
.yourbg{
  width: 100%; height: auto;
  position: absolute;
  left: -50%;
}
</style>

这里的例子http://jsfiddle.net/e4w6stmc/

【讨论】：

是的，这很简单，我就是这么做的。我特意指的是背景图像，所以这与我的问题无关，而是一种解决方法。我确实看到我对这个问题并没有那么清楚。解决这个问题。