title: Adaptive thumbnail div which responsive to screen size
body: <p>I have a list of thumbnail images which when you resize the browser screen they all adapt nicely and keep the same height and width.</p>
  
  <p>I need to add in a thumbnail for when there is no image, with a centerd icon, however when i resize the browser the div doesnt expand the same way as the images. </p>
  
  <p>This is designed for mobile screens, but i would like it to have the same behavious as the images.</p>
  
  <p>What am i missing in the code, im guessings its a css issue to do with height or margin / percentage values?</p>
  
  <p>I have a demo with all the code i have done: - </p>
  
  <p><a href="http://jsfiddle.net/zM5SG/1/" rel="nofollow">http://jsfiddle.net/zM5SG/1/</a></p>
  
  <pre><code>.gallery li a.addImage {
  display: block;
  margin: 7px 5px 0 5px;
  border: 1px dotted #aaa;
  background-color: #ddd;
  min-height: 58px;   
  }
  
  .test{
     background: url("http://icons.iconarchive.com/icons/custom-icon-   design/mini/24/Delete-icon.png") no-repeat scroll /*1px -109px*/ center transparent; 
     display: block; width:24px; height:24px; text-align:center; 
     margin: 0 auto;
     margin-top: 15%; margin-bottom: 15%;
  }
  </code></pre>
  
  <p>Any help would be great thanks.</p>