将响应图像裁剪到偏离中心点

Question

我实际上并不是一名前端开发人员，但我已被要求为响应式网络应用程序执行css。大多数情况下，我已经设法使用getBootstrap和stackOverflow将所有内容组合在一起，但我遇到了一个我无法找到解决方案的问题。

即;该设计要求在主页顶部提供响应全宽背景图像。固定高度，在页面变窄时裁剪。 本身没问题，但同一页面的较小尺寸设计要求将此图像裁剪到稍微偏离中心的位置，如下所示：

有很多关于如何将图像锁定在页面左侧并使图像从右侧裁剪，或者使图像居中并使其从两侧平均裁剪的代码示例，但我可以＆＃39 ;对于我的生活来说，找出一种流畅的方式让图像从左边开始裁剪33％左右，从右边裁剪66％。

是否有可靠的方法来做到这一点，和/或是否会有一个聪明的解决方法？

Answer 1

关键是background-position属性与background-size: cover结合使用。

background-size: cover告诉浏览器您希望图片展开以填充可用空间，并让图片的其他部分在您的框外被切除。

因此，如果您的宽度为200px，高度为200px的<div>和宽度为1000px，高度为500px的图像，那么它将缩小到200px高和400px宽。

接下来的问题是如何选择图像的哪些部分显示，哪些部分不显示？这就是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.