How can i make a Facebook Cover in CSS/HTML?

Question

I would appreciate if someone could help me and show me how i could do in CSS/HTML a background cover.

What i intend to do is make a 100% width cover with 270px height that will fit nice and not stretch my image, i don't mind if it zooms it, but keep the right ratio.

Example:

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

The image inside should fit nice with 100% width and 270px height and good ratio. Is that possible?

Answer 1

Keep the existing HTML

CSS:

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

Additionally, if you want to center the image vertically within the div (not recommended from a design point of view, but what the hell)

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

Check out http://jsfiddle.net/CaB8g/