Отзывчивость не работает?

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; 
} 

Я попытался изменить все точки в процентили, а также пытался добавить некоторые медиазапросы, но ничего не происходят им не удалось чтобы найти проблему

Любое предложение будет отличным для моего опыта обучения.

Answer 1

Для того, чтобы сделать адаптивные изображения, чтобы установить их ширину до 100%, так что они наследуют TAHT контейнеры шириной. Также установите минимальную и максимальную ширину, чтобы обеспечить некоторые границы. тоже установлен высота to авто.

Пример здесь: 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

.nature img{ 
    max-width:100% !important; 
    height:auto; 
    display:block; 
} 

или вы можете использовать JQuery, как это ..

responsive images