Crop an image to square using percentages and max widths

Working a responsive site, so I cannot use set widths.

I need pictures to all crop to square. I cannot define the exact measurements because it also needs to have max-width:100% 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).

I've seen a lot of solutions that suggest using background-image but this not possible, it must be an img tag. It also must work in IE8.

Any ideas?

I currently have:

.views-field-field-photo img {
    width: 100%;
    height: auto;
    }



    <div class="field-content">
<img src="imagehere" >
</div>