響應不工作？

Question

我試圖讓一些圖片響應，但每次都失敗。

這是我的HTML代碼

<div class="wrapper"> 
    <div class="inner"> 
    <div style="margin-top:30px;"><img src="nature/logo.png"></div> 

    <div id="content"> 

     <div class="socials"> 

     </div> 

     <div class="nature"> 
       <ul class="reset"> 
       <li><a href="#"><img src="nature/img7.png"alt="" /></a></li> 
       <li> <a onClick="javascript:sendpage();" style="cursor:pointer;"><img src="nature/img2.png"alt="" /></a></li> 
       <li><a href="#"><img src="nature/mg3.png"alt="" /></a></li> 
       <li><a href="#"><img src="nature/img4.png"alt="" /></a></li> 
       <li><a href="#"><img src="nature/img5.png"alt="" /></a></li> 
       <li><a href="#"><img src="nature/img6.png"alt="" /></a></li> 
       <li><a href="#"><img src="nature/img4.png"alt="" /></a></li> 
      </ul> 
     </div> 

    </div> 
</div> 
    </div> 

，這下面的這個CSS文件

.nature { 
display:block; 
width:150px; 
height:150px; 
background:url(../nature/img1.png) no-repeat; 
cursor:pointer; 
position:relative; 
} 

.socials, .nature { 
margin:0 auto; 
} 

.socials { 
margin-bottom:50px; 
} 

ul.reset, 
ul.reset li { 
display:block; 
list-style:none; 
padding:0; 
margin:0; 
} 
} 

ul.reset li { 
position:absolute; 
} 

ul.reset li a { 
outline:none; 
} 

我試圖改變所有的像素爲百分，也嘗試添加了一些媒體的質疑，但什麼也沒有發生IM無法找到問題

任何建議對我的學習體驗都很有幫助。

Answer 1

爲了使響應圖像是如此taht它們繼承了容器寬度其寬度設置爲100％。還要設置最小和最大寬度以提供一些邊界。 也設置高度爲自動。

這裏舉例：http://jsfiddle.net/vU9G4/5/

<div class="nature"> 
    <ul class="reset"> 
     <li><a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg" alt="" /></a></li> 
    </ul> 
</div> 

CSS：

*{ 
    margin:0px; 
    padding:0px; 
} 

.nature { 
    width:100% 
    background:#000; 
    cursor:pointer; 
    position:relative; 
} 


ul.reset li { 
    list-style:none; 
    position:absolute; 
} 

ul.reset li a { 
    outline:none; 
} 

ul.reset li a img{ 
    min-width:240px; 
    width:100%; 
    height:auto 
} 

Answer 2

您似乎沒有定義樣式。以下應該可能解決它。

.nature img { 
max-width: 100%; 
} 

Answer 3

​​

，或者你可以使用jQuery這樣的..

responsive images