我实际上不是前端开发人员，但有人要求我为响应式 Web 应用程序编写 CSS。大多数情况下，我已经设法使用 getBootstrap 和 stackOverflow 将所有内容拼凑在一起，但我遇到了一个我无法找到解决方案的问题。
即；该设计要求在主页顶部使用响应式全角背景图像。固定高度，当页面变窄时被裁剪。 本身没有问题，但同一页面的较小尺寸设计要求将此图像裁剪到稍微偏离中心的位置，如下所示：
有很多关于如何将图像锁定在页面左侧并从右侧裁剪，或将图像居中并从两侧均等裁剪的代码示例，但我不能一辈子我想出了一种流畅的方式，让图像从左侧裁剪约 33%，从右侧裁剪 66%。
是否有可靠的方法来做到这一点，和/或是否有聪明的解决方法？
【问题讨论】：
标签： css image responsive-design
关键在于background-position 属性与background-size: cover 的组合。
background-size: cover 告诉浏览器您希望图像扩展以填充可用空间，并让图像的多余部分在您的框外被切断。
因此，如果您有一个宽度为 200 像素、高度为 200 像素的 <div> 以及一个宽度为 1000 像素、高度为 500 像素的图像，那么它将缩小到 200 像素高和 400 像素宽。
下一个问题是如何选择图像的哪些部分显示哪些不显示？这就是background-position 的用武之地。
您可以将其设置为简单的东西，例如background-position: center center;，它垂直和水平居中，通常是所需的结果。但是，对于您的情况，您想使用以下内容：
background-position: center left 33%;
这将使您的图像在更大的屏幕上居中，并且当容器的宽度超过容器（例如<div>）所需的宽度时，它会将其移动到左侧的 33% 处。
这是一个完整的例子：
HTML：
<div class="hero"></div>
CSS：
.hero {
height: 500px;
background-image: url("[your-image-url]");
background-size: cover;
background-position: center left 33%;
background-repeat: no-repeat;
}
希望这是有道理的。 Here's a codepen showing it in action.
【讨论】：