Html 标题图像响应居中

我正在尝试编写与此页面上的标题图像类似的标题图像：注意当你调整页面大小时，男人的形象会发生什么变化它保持在同一个位置，它总是居中，而且不会突然出现（底部有一点，但无论如何也不会太多）。这是我谦逊而简洁的代码：（还有一把小提琴：）

html:

我发现的问题是，当我调整浏览器窗口的大小时，div会压缩到只有男人的脸才能看到的程度，这与原始页面中的情况相反，在原始页面中，你总是可以看到肩膀。我不知道我的解释是否正确，但基本上，在调整窗口大小时，div的高度变化比它在原始页面上的变化快得多，这会影响页面的其余部分，因为男人的图像必须始终保持在同一位置，并且必须始终具有相同的纵横比。我已经解决了纵横比的问题，但是我在windows resize上遇到了div高度压缩和扩展太多的问题

我认为原始页面是使用Drupal7完成的。但我想要的是一个css代码段，它可以做到这一点。我知道这是可能的，我已经试了好几个小时了，但是我错过了一些东西。我知道原始页面使用了许多不同分辨率的图像，但这不是问题所在

希望有人能帮忙。我期待着您的评论

提前谢谢

参见更新的小提琴：

加上

background-size: 100%;
background-repeat: no-repeat;

像这样：

.abc{    
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-position:top center;
    min-height:386px;        
}

---

谢谢你，亚当！但是当我调整浏览器窗口的大小时，我仍然有同样的问题。尝试展开小提琴窗口上的“结果”面板。你会看到，当你缩小肩膀时，你只会看到脸。但在最初的页面中，你总能看到肩膀。我不知道我遗漏了什么。@qwerty1234我没有看到任何内容被裁剪出来：/试着尽可能多地扩展JSFIDLE上的结果面板，然后调整大小。你会看到他的肩膀和脖子都消失了，就好像这个人从一栋楼的窗户后面伸下来，你只看到他的脸一样；这将停止调整大小时的裁剪。这是一把小提琴。我会研究一下，然后回来更新。谢谢你的回复！为什么我的问题被投了反对票？？

background-size: 100%;
background-repeat: no-repeat;

.abc{    
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-position:top center;
    min-height:386px;        
}