title: Keeping image aspect ratio in a division
body: <p>I have a division with n-number of divs which consist of images of different sizes:</p>
  
  <pre><code>&lt;div&gt;
  &lt;div&gt; &lt;img ng-src="{{backgroundImage}}" /&gt;  &lt;/div&gt;
  &lt;div&gt; &lt;img ng-src="{{backgroundImage}}" /&gt;  &lt;/div&gt;
  &lt;div&gt; &lt;img ng-src="{{backgroundImage}}" /&gt;  &lt;/div&gt;
  &lt;div&gt; &lt;img ng-src="{{backgroundImage}}" /&gt;  &lt;/div&gt;
  &lt;div&gt; &lt;img ng-src="{{backgroundImage}}" /&gt;  &lt;/div&gt;
  &lt;!-- dynamically the images will be loaded --&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>The functionality I am looking for is: </p>
  
  <ul>
  <li><p>They have to flow in one row regardless of the number of images, which means they should re-size to smaller images if there is a large number of images.</p></li>
  <li><p>The images aspect ratio has to be kept on re-sizing</p></li>
  <li><p>The div should be all equal width and height on re-sizing</p></li>
  <li><p>What I'd actually like is for each image to be aligned within a square that is consistently sized with all of the other images. Each image should be constrained and re-sized within their own square. Then I want all of the containing squares to be sized across the row. So as the number of images increases the size of the squares decrease accordingly.</p></li>
  </ul>
  
  <p>I have tried and searched a lot for the solution, but nothing worked. Please demonstrate some real examples with the functionality I mentioned above. </p>