响应式重新调整图像的焦点/焦点（例如全宽标题）

Question

我经常制作具有响应性的网站，并在页面的某些位置使用全宽标题或元素，如图像滑块一样全宽。

我经常这样做，以便他们转变为

background-image: url(/images/image.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

这种方法的问题在于，当将浏览器拉伸或缩小到不同的宽高比时，图片的重要内容通常会被切断。想想头，四肢等等。

有时候我可以通过改变背景位置来解决这个问题，但我常常不这样做。

我正在寻找一个合适的解决方案，以确保我能够定位重要内容，因此我知道无论宽高比如何都会显示内容。

显示问题的图片：

还有我从自己的答案中选择的图片：

Answer 1

似乎背景位置正是您所寻找的（但关注的是位置，而不是某个区域）。

专注于猫眼的演示。将鼠标悬停在div上以使其适应。

.base {
    width: 500px;
    height: 200px;
    background: url(http://placekitten.com/1000/750);
    background-size: cover;
    position: absolute;
    top: 40px;
    left: 40px;
    background-position: 54% 46%;
    transition: height 2s, width 2s;
}

#base1:hover {
    height: 40px;
}

#base2 {
    top: 250px;
    height: 500px;
    width: 600px;
}

#base2:hover {
    width: 200px;
}

<div class="base" id="base1"></div>
<div class="base" id="base2"></div>

Answer 2

我找到了一个jQuery库，它通过添加数据属性来允许图像上的焦点。它没有能力专注于一个完整的区域，但至少它完成了它所说的工作并且它很容易应用。

https://github.com/jonom/jquery-focuspoint

对我而言，这不是最理想的解决方案，但对某些人来说可能会有所帮助。