title: How to get multiple images to auto resize and stay centered within a div
body: <p>I am trying to get the multiple university logo images in a row to scale down as the browser width gets smaller and not overflow its container div, just like I do with the blueish picture above. The picture scales within its div by applying max width and heigh of 100%. But the logo images do not scale in the same way and overflow the div. </p>
  
  <p>Here is a live example: <a href="http://feroze.org/new-education/" rel="noreferrer">http://feroze.org/new-education/</a> - try resizing and see what I mean</p>
  
  <p>Here is the css for the logos container div gray bar</p>
  
  <pre><code>#partners
    height 105px
    background-color #eee
    white-space nowrap
    width 100%
  </code></pre>
  
  <p>and here is the css applied to the logo images themselves</p>
  
  <pre><code>.logo-image
    vertical-align middle
    padding 13px
    max-width 100%
    display inline
  </code></pre>
  
  <p>As you can see I aligned them vertically in the grey bar. But as the bar shortens I want the images to stay within the div and resize according to the container div. </p>
  
  <p>Any help would be greatly appreciated! Thanks</p>
  
  <p><img src="https://i.stack.imgur.com/qsU7q.png" alt="screenshot of logo overflow"></p>