響應圖像

我不是找對圖像的創造性的解決方案，我讀過大量的內容有關加載圖片等響應圖像

我只是在做一些基本的響應式設計，並希望加載一個大的圖像隨着窗戶變小，將其壓扁。

我已經寫了下面的CSS：

@media (max-width:420px){ 
    #header #logo{ 
     width:60%; 
     float:left; 
     background:red; 
    } 

    #header #logo #image{ 
     margin:5%; 
     width:20%; 
     float:left; 
     background:green; 
    } 

    #header #nav{ 
     width:40%; 
     float:left; 
     background:purple; 
    } 

    #header #nav #search{ 
     max-width:33%; 
     float:left; 
    } 

    #header #nav #account{ 
     max-width:33%; 
     float:left; 
    } 

    #header #nav #menu{ 
     max-width:33%; 
     float:left; 
    } 
}

和HTML去用它：

<div id="logo"> 
     <div id="image"> 
      s 
     </div> 
    </div> 
    <div id="nav"> 
     <div id="search"> 
      <img src="assets/images/mobile-search.png"/> 
     </div> 
     <div id="account"> 
      <img src="assets/images/mobile-account.png"/> 
     </div> 
     <div id="menu"> 
      <img src="assets/images/mobile-menu.png"/> 
     </div> 
    </div>

圖像不調整，因爲我調整窗口的大小。什麼是正確的CSS語法來實現這一目標？

謝謝:)

來源

2013-07-20 sark9012

將max-width應用於您的圖片。

img { 
    max-width: 100%; 
}

http://jsfiddle.net/VBHhD/

我也將使用導航無序列表，不過這只是我。

來源

2013-07-20 13:55:50 hungerstar

另一個提示：應用IMG屬性最大寬度只有要被調整的IMG） – PaoloCargnin

我一直使用的導航鏈接，使得整個事情可以點擊無JS的，從而使它可以中心點擊鼠標。 – jdepypere

他們只是圖像點擊，將使用JS來顯示菜單等。 – sark9012

在您的CSS您正在使用媒體查詢的最大寬度爲420px這是一個移動視圖。你有沒有試圖調整你的瀏覽器在一個非常低的水平？ @media（max-width：420px）{＃header #nav #search img，＃header #nav #account img，＃header #nav #menu img { width：50％;

} http://codepen.io/anon/pen/kchqg

來源

2013-07-20 14:31:29

回答

相關問題