響應式設計圖片無法縮放

本月我在網絡標準設計課程中學習HTML/CSS，本週我們正在修復我們的網站以進行響應。響應式設計圖片無法縮放

我已將所有px轉換爲百分比，並將所有字體從px轉換爲em。我在我的畫廊上弄亂了最大寬度：100％。

我會發布我的鏈接，而不是所有的代碼。

http://jgoldd.github.io/wsd/index.html

2013-07-25 Justin Goldman

順便說一句，該網站假設是100％，但他們要求我們遵循一些設計規則，不能做任何我想要的。再次感謝 –

就拿寬度和保證金關你的身體標記。建立一個叫做一個包裝類，並添加它裏面的容器，例如

.wrapper{ 
    max-width:960px; 
    margin:0 auto; 
    width:100%; 
} 

<header> 
    <div class="wrapper"> 
     // put your content in here 
    </div> 
</header> 

<div id="content"> 
    <div class="wrapper"> 
     // put your content in here 
    </div> 
</div> 

<footer> 
    <div class="wrapper"> 
     // put your content in here 
    </div> 
</footer>

如果你不想這樣做，你可能只是你的身體設置爲

body{ 
    max-width:960px; 
    width:100%; 
}

不過，我想你的結構改變用包裝的方式是很好的從一開始就練習乾淨的代碼衛生:-)

來源

2013-07-25 23:51:39

爲我的所有元素添加了包裝，並將該類添加到了CSS中，但它仍然不會調整大小：/ –

我看到，您希望將這些圖像放入媒體查詢中，以使#gallery_container和圖像內部寬度100％ –

你將需要玩一下，但是這裏有一點讓你朝着正確的方向前進。（刪除我評論的刪除線）

#gallery li{ 
    width: 49%; 
    display: inline-block; 
    .display: inline; /* for IE 8 */ 
    zoom: 1; /* for IE 8 */ 
    /* float: left; REMOVE */ 
} 

#gallery img { 
    width: 100%; 
    /* max-width: 100%; REMOVE */ 
} 

#gallery_container{ 
    width: 100%; 
    /* width: 41.666667%; REMOVE */ 
}

試試看。應該給你更好的結果，並希望讓你到你想要的地方。

來源

2013-07-26 04:18:08 ericjbasti

你的css太麻煩了。所以，讓我解釋一下你一個簡單的技術來激活響應行爲，以圖像

在HTML

<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">

CSS

.resize { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
}

此代碼簡單激活上的圖像的響應行爲試試這個代碼。

如果您有任何疑問，請告訴我...！ :)

來源

2013-07-26 06:18:20 WhitehatK

響應式設計圖片無法縮放

回答

相關問題