How to resize this image using simple HTML and CSS -

i trying resize responsive image basic html , css. seems though no matter do, nothing alter size. there preventing being larger image? i'm teaching myself how create webpage , accept advice given! thanks!

html

<ul id="gallery">    <li>       <a href="img/chicago.jpg">         <img src="img/chicago.jpg" alt="">       </a>    </li> </ul> 

css

#gallery{     margin:0;     padding:0;     list-style: none; }  #gallery li {     float: left;     position: relative;     left: 30%;     width: 70%;     margin: 2.5%;     background-color: #f5f5f5;     color: #bdc3c7;  } 

the css properties max-width , max-height work great, aren't supported ie6 , believe ie7. want use on height / width don't accidentally scale image up. want limit maximum height/width proportionately.

working example

css:

img {     border:1px solid #000; width:100%;/*adjust value needs*/ max-width: 400px;/* wont bigger , pixelated*/ height:auto; } 

html:

  <a href="img/chicago.jpg">     <img src="img/chicago.jpg" alt="">   </a>