title: How to create square image thumbnails using the foundation framework with CSS
body: <p>I'm trying to achieve this using foundation 3.2.5:
  <a href="http://foundation.zurb.com/old-docs/f3/clearing.php" rel="nofollow">http://foundation.zurb.com/old-docs/f3/clearing.php</a></p>
  
  <p>I want the thumbnails to show up as squares with the same size. This here is the code that i took from their website and which they are using:</p>
  
  <pre><code>              &lt;div class="row"&gt;
              &lt;div class="four columns"&gt;
                &lt;ul class="block-grid three-up mobile-two-up" data-clearing&gt;
                  &lt;li&gt;&lt;a href="http://placekitten.com/g/1000/1000"&gt;&lt;img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/1000"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="http://placekitten.com/g/1000/900"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://placekitten.com/g/1000/800"&gt;&lt;img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://placekitten.com/g/1000/800"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img data-caption="Pellentesque ornare sem lacinia quam venenatis vestibulum." src="http://placekitten.com/g/1000/700"&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://placekitten.com/g/1000/600"&gt;&lt;img data-caption="Etiam porta sem malesuada magna mollis euismod." src="http://placekitten.com/g/1000/600"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit." src="http://placekitten.com/g/1000/500"&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>However when using this with foundation 3 it wont resize the images to squares. Any ideas what i might be missing?</p>