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

Question

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

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

例子:

<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 中将图像垂直居中(从设计的 Angular 不推荐，但管它呢)

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

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