圖片和動態佈局

Question

我正在使用基於em佈局的網站（因此，當用戶增加或減小字體大小時，它可以優雅地拉伸和壓縮）。這個網站有一個標題，應該顯示在所有頁面上。我在所有頁面的「頭」的DIV，和整個網站的CSS文件中包含的代碼：

#header 
{ 
    width: 50em; 
    height: 6em; 
    margin-bottom: .5em; 
    background: url("/IMAGES/header.png"); 
} 

的問題是，這並沒有真正舒展優雅。當文字大小增加時，高度和寬度會發生變化，但**圖像的大小不會增加;它簡單地重複*。*

我怎樣才能使我的形象伸展和擠壓，而不是重複或截斷？（如果可能，我想要一個基於css的解決方案......我已經在商店中獲得了一些html創意）。

Answer 1

沒有辦法使用CSS來渲染背景圖像。你將不得不使用JavaScript或類似的東西。但是，如果你有沒有需要重複（如融入背景中）的圖像，你可以做這樣的事情：

background-position: center center; 
background-repeat: no-repeat; 

附錄：位置具有以下格式：<頂部|中心| pos | xpos > < left | center | right | ypos > 其中xpos和ypos可以以常規方式給出（em，px，％等等）。

Answer 2

我曾經發現的唯一的方法是：

• 的#header的設置背景，標題圖片的bgcolor。
• 將新的div內的#header
• 拆分標題圖片爲2
• 集新形象的左半邊爲對齊左的#header背景
• 設置新的圖像的右半部分爲＃header.div背景aligned- right

當然，這隻適用於適當的圖像。

Answer 3

我很確定你不能改變背景圖像的縮放比例。如果您的header.png文件包含在img標記中，那麼您可以將它的高度和寬度設置爲ems，瀏覽器將調整其大小（通常使其看起來像廢話）。

請記住，幾乎所有的現代瀏覽器都做頁面縮放，這將擴展一切，而不會改變你的佈局太多。也許告訴你的用戶使用該功能？

Answer 4

@Pianosaurus，我認爲你的想法可能是最簡單的，儘管是有限的。簡單地說，不要拉伸圖像，但要確保圖像沒有被拉伸時（看起來很好，不要讓它重複）。另外，如果在標題圖像的邊緣使用相當數量的填充，則縮小頁面大小也不會導致如此大的問題。