創建一個菜單欄，它的高度是固定的，但隨着瀏覽器大小在CSS中發生變化而縮小？

-1

我想創建一個菜單欄，高度是固定的，但隨着瀏覽器大小在CSS中的變化擠壓？創建一個菜單欄，它的高度是固定的，但隨着瀏覽器大小在CSS中發生變化而縮小？

這是我當前的CSS，它只是在PS中創建的菜單欄，大小爲1920 X 100，我希望在瀏覽器大小發生變化時拉伸整個頁面頂部，並且高度保持不變;

#bar { 
background:url("/Users/Macbook/Desktop/test website/images/bar.png"); 
height:100px; 
}

三江源非常多的幫助

來源

2014-01-24 bjbear123

所以，你希望它在水平方向而不是垂直擴展？這會不會讓圖像看起來很奇怪，因爲它的高寬比會關閉？ –

嗨，是的，我希望它只是水平縮放，因爲這只是一個菜單欄，目前只是從Photoshop中保存爲PNG的塊顏色。謝謝你的幫助 – bjbear123

@ bjbear123爲什麼不水平重複圖像呢？ – DaniP

您可以使用background-size你讓你的容器是width:100%作爲的行爲默認的div屬性和背景始終爲100％：

#bar { 
    background:url("/Users/Macbook/Desktop/test website/images/bar.png") no-repeat center; 
    height:100px; 
    background-size:100% 100%; 
}

檢查這個演示http://jsfiddle.net/RLPbg/。

_{About compatibility}

這裏的問題是你的圖像被扭曲。

編輯

記住紅外圖像只是一個PNG的顏色，你alwasy可以使用其他選項，如：

重複背景。
線性漸變

來源

2014-01-24 22:29:26 DaniP

這是完美的謝謝你，有沒有辦法我可以垂直壓縮圖像，而不是使用高度：100px的一半圖像被切斷？ – bjbear123

創建一個菜單欄，它的高度是固定的，但隨着瀏覽器大小在CSS中發生變化而縮小？

回答

相關問題