如何使用 CSS/HTML 制作 Facebook 封面？

Question

如果有人可以帮助我并向我展示如何使用 CSS/HTML 制作背景封面，我将不胜感激。

我打算做的是制作一个 100% 宽度、270px 高度的封面，它会很好地贴合并且不会拉伸我的图像，我不介意它是否缩放，但保持正确的比例。

例子：

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

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

Answer 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/