title: Crop an image to square using percentages and max widths
body: <p>Working a responsive site, so I cannot use set widths.</p>
  
  <p>I need pictures to all crop to square. I cannot define the exact measurements because it also needs to have <code>max-width:100%</code> in order to make it a responsive image which adjusts it's sized relative to the container (which is relative to the width of the browser).</p>
  
  <p>I've seen a lot of solutions that suggest using <code>background-image</code> but this not possible, it must be an <code>img</code> tag. It also must work in IE8.</p>
  
  <p>Any ideas?</p>
  
  <p>I currently have:</p>
  
  <pre><code>.views-field-field-photo img {
      width: 100%;
      height: auto;
      }
  
  
  
      &lt;div class="field-content"&gt;
  &lt;img src="imagehere" &gt;
  &lt;/div&gt;
  </code></pre>