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

Question

如果有人可以幫助我，告訴我如何在CSS/HTML中做一個背景封面，我將不勝感激。

我打算做的是使與270px高度寬度100％覆蓋，將適合漂亮和不舒展我的形象，我不介意，如果它縮小，但保持正確的比例。

實施例：

<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%; 
} 

此外，如果要居中垂直的專區內的圖像（不是從外觀設計上來看建議，但什麼是地獄）

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

退房http://jsfiddle.net/CaB8g/