如何在 CSS/HTML 中制作 Facebook 封面？

【问题标题】：How can i make a Facebook Cover in CSS/HTML?如何在 CSS/HTML 中制作 Facebook 封面？
【发布时间】：2016-07-22 21:53:36
【问题描述】：

如果有人可以帮助我并告诉我如何在 CSS/HTML 中制作背景封面，我将不胜感激。

我打算做一个 100% 宽度的封面，高度为 270 像素，这将很适合我的图像并且不会拉伸我的图像，我不介意它是否缩放它，但保持正确的比例。

例子：

<div class="cover">
   <img src="link.jpg">
</div>

里面的图片应该适合 100% 的宽度和 270px 的高度和良好的比例。这可能吗？

【问题讨论】：

标签： html css

【解决方案1】：

保留现有的 HTML

CSS：

.cover {
   width: ... /* whatever width you want for the cover div */
   height: 270px;
   background-color: white; /* optional */
   overflow: hidden;
}
.cover > img {
   width: 100%;
}

另外，如果你想在 div 中垂直居中图像（从设计的角度来看不推荐，但这是什么鬼）

.cover > img {
   width: 100%;
   position: relative;
   top: 50%;
   margin-top: -50%;
}

查看http://jsfiddle.net/CaB8g/

【讨论】：

谢谢，那么您会推荐什么？脸书是如何做到的？我应该这样做，但我猜是全屏。
@JoshSodroc：如果您认为它满足您的问题，请接受答案。