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

Question

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

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

例子：

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