Le service Réactif ne fonctionne pas?

Question

J'essayais de rendre certaines images sensibles mais échouant à chaque fois.

Ceci est mon code 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> 

et ce qui suit ce fichier 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; 
} 

J'ai essayé de changer tous px en percentile et aussi essayé d'ajouter des requêtes des médias, mais rien ne se passe im pas pour trouver le problème

Toute suggestion sera formidable pour mon expérience d'apprentissage.

Answer 1

Afin de faire des images sensibles est de définir leur largeur à 100% si TAHT ils héritent des conteneurs largeur. Définissez également une largeur minimale et maximale afin de définir certaines limites. règle également la hauteur sur auto.

Exemple ici: 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

Vous ne semblez pas avoir de style défini pour. Ce qui suit devrait probablement le réparer.

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

Answer 3

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

ou vous pouvez utiliser jquery comme ça ..

responsive images