title: How to make images height/width/padding auto scale to fit images in properly
body: <p>What I want to do is have the images on this site change in width and height (they should be equal) between 50-60px. However between them they all need to have a minimum padding of 5px. This can vary depending on the size of the images, this is the case as the two end images need to fit to the edges of the parent div, to align with an image about it. The height/width/padding should all change to ensure the images are still properly aligned when then screen size changes.</p>
  
  <p>If you look at this page you will be able to see what I mean. The images that need to change are the grey squares at the bottom. </p>
  
  <p><a href="http://media.gaigo.org/work2.html" rel="nofollow">http://media.gaigo.org/work2.html</a></p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;div class="smallImages"&gt;
      &lt;div&gt;&lt;a href="#item-1"&gt;&lt;img src="static/img/smallImage.png"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div&gt;&lt;a href="#item-2"&gt;&lt;img src="static/img/smallImage.png"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div&gt;&lt;a href="#item-3"&gt;&lt;img src="static/img/smallImage.png"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div&gt;&lt;a href="#item-4"&gt;&lt;img src="static/img/smallImage.png"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css is as follows:</p>
  
  <pre><code>smallImages div {
      display: inline-block;
      padding: 5px;
  }
  .smallImages div img {
      max-width: 60px;
      min-width: 50px;
      max-height: 60px;
      min-height: 50px;
  }
  </code></pre>
  
  <p>Sorry if this seems confusing. Just ask if you need me to explain more.</p>