html - 没有重新调整的 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%; }

但是当我在响应模式下看到封面图片时出现问题图像重新调整自己!即在桌面模式下，自行车司机的头不显示，但在其他小型设备模式下，司机的头是可见的。

问题:

我怎样才能像 facebook 那样制作一个稳定且响应迅速的封面图片？

---

P.S:请注意，用户会像facebook一样修改封面图片的观点!

Answer 1

您可以尝试使用 background-image 来代替，这样您就可以设置:

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

这将拉伸(stretch)图像以填充整个元素而不损失比例。

参见 Updated Fiddle