CSS封面图像，无需重新调整

Question

我希望有像Facebook封面的东西，我在这个社区遇到了this jsfiddle。

.cover { width: 100%; height: 180px; overflow: hidden; background-color: black; }
.cover > img { position: relative; width: 100%; top: 50%; margin-top: -50%; }

但是当我在响应模式下看到封面图像时，图像会重新调整自身，这是一个问题！即在桌面模式下，bycycle驱动程序的头部没有显示，但在其他小型设备模式下，驱动程序的头部是可见的。

问题：

如何制作一个恒定的＆amp;响应封面图像像facebook？

P.S：请注意，用户将像facebook一样修改封面图片视点！

Answer 1

您可以尝试使用background-image，因此您可以设置：

background-size: cover;
background-position: center;

这会拉伸图像以填充整个元素而不会丢失比率。

请参阅 Updated Fiddle