Crop an image to square using percentages and max widths

Question

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>

Answer 1

using padding-bottom along with positioning and overflow:hidden you can create a responsive square container:

.field-content{
    width:80%;
    padding-bottom:80%;
    margin:1em auto;
    overflow:hidden;
    position:relative;
    background:#000
}

.field-content img {
   position:absolute;
   width:auto;
    min-width:100%;
    min-height:100%;
}

DEMO

jQuery DEMO center images when scaling

I tidied up some of the js allowing multiple images to be scaled and put 4 images on a simple grid

Answer 2

You can do something like overflow:hidden I've made a square of 100px you can define your own size.

HTML

<div id="frame">
<img src="your image"/>
</div>

CSS

#frame{
width:100px;
height:100px;
overflow:hidden;
}

#frame img{
width:auto;
height:100%;
min-width:100px;
min-height:100px;
}