CSS圖像/背景縮放

設置：我有這website與頂級標題圖像需要根據屏幕大小正確調整大小。這是我使用的代碼：CSS圖像/背景縮放

HTML：

<img class="header-background" src="<?php echo get_template_directory_uri() . '/images/header.png';?>" alt="Header" />

CSS：

.header-background { 
left: 0; 
margin: auto; 
right: 0; 
position: absolute; 
z-index: 91; 
width: 100%; 
margin-top: -35px; 
}

問題：的影像尺寸爲1900x227像素，我需要它來正確地調整大小取決於每個用戶的分辨率。

這是它應該看起來像。每個分辨率的藍色頂部應保持不變。

用CSS背景/形狀替換圖像會更容易嗎？

enter image description here

問題有那麼如當用戶調整他們的瀏覽器時，會發生這種情況：http://s8.postimage.org/vds0b7ljp/Capture.png – Qiang

是的，這就是問題所在。 –

它只是圖像高度？還是說所有的頁面都掉了？ – Qiang

您可以添加靜態高度像height:200px。

（這就是我發現的最適合我的電腦）。

2012-09-25 19:07:27 Qiang

是的，它也適用於我的解決方案。感謝您的幫助！ –

歡迎您... – Qiang

我認爲這裏最好的做法是使用媒體查詢與最小/最大高度&關係值。

例：

@media all and(max-width: 980px) and (max-height: 980px){ 
    .headerImage{ 
     width:8em; 
     height:90%; 
    } 
}

有用的工具來轉換像素值EMS：http://pxtoem.com/

2012-09-25 19:31:25

回答