Css 使用百分比和最大宽度将图像裁剪成正方形

在一个有响应的站点上工作，所以我不能使用设置的宽度

我需要把所有的图片裁剪成正方形。我无法定义精确的测量值，因为它还需要有

最大宽度：100%

，以便使其成为一个响应图像，调整其相对于容器的大小（相对于浏览器的宽度）

我见过很多建议使用

背景图像的解决方案，但这是不可能的，它必须是
img
标签。它也必须在IE8中工作

有什么想法吗

我目前有：

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



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

。查看现场照片img{
宽度：100%；
高度：自动；
}
您可以执行诸如溢出：隐藏之类的操作
我已经做了一个100像素的正方形，你可以定义你自己的大小

HTML

使用
padding-bottom
以及定位和
overflow:hidden
可以创建响应性方形容器：

.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%;
}



我整理了一些js，允许缩放多个图像，并将4个图像放在一个简单的网格上
这很好，但有没有办法使其裁剪到中心而不是右上角？我能想到的唯一办法就是抛出一些jquery——代码有点凌乱，但它确实起到了作用。这个答案是固定宽度的，没有响应性，没有响应性@邓肯·贝蒂对上述问题有答案。
#frame{
width:100px;
height:100px;
overflow:hidden;
}

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

.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%;
}