使用響應式佈局調整圖片大小

-1

有人可以幫我弄清楚爲什麼我的徽標圖片沒有根據瀏覽器大小調整大小嗎？使用響應式佈局調整圖片大小

---------------- CSS ---------------------

body { 
     height: 100%; 
     background-color:#333; 
} 
#logo { 
     max-width: 100%; 
} 
img { 
    border: 0; 
    max-width: 100%; 
    height: auto; 

} 
#header-bg { 
    background-image: url("header-bg.png"); 
    overflow: auto; 
    width: 100%; 
}

- --------------- HTML -------------------

<body> 
    <div id="header-bg"> 
    <div id="logo"> 
     <img src="logo.png" /> 
    </div> 
    </div> 
</body>

來源

2013-02-12 MG1

原因是，你已經給max-width ，可能會比原來的width少。所以給width將解決你的問題。

img { 
    border: 0; 
    width: 100%; 
    height: auto; 
}

除此之外，一切都是正確的。

如果你覺得你的形象不是SOOOO大，它佔據屏幕的整個寬度，給較小的寬度父，說25%。以及100%的圖片width。所以父母會根據屏幕的寬度進行調整，您的圖片也是如此。 :)

來源

2013-02-12 16:39:27

當我將寬度設置爲100％時，它會在整個窗口上展開徽標。 – MG1 2013-02-12 16:41:51

@ MG1查看已更新的答案。希望有所幫助。 :) – 2013-02-12 16:43:40

我爲你創建了一個jsFiddle來展示@Praveen Kumar解釋：http://jsfiddle.net/persianturtle/4h2xU/1/ – 2013-02-12 16:53:46

使用響應式佈局調整圖片大小

回答

相關問題