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

工作响应式网站，所以我不能使用设置的宽度。

我需要将图片全部裁剪为正方形。我无法定义精确的测量值，因为它还需要有max-width:100%为了使其成为响应式图像，它可以相对于容器（相对于浏览器的宽度）调整其大小。

我见过很多建议使用的解决方案background-image但这是不可能的，它必须是img标签。它还必须在 IE8 中运行。

有任何想法吗？

我目前有：

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



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

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

DEMO

缩放时 jQuery DEMO 中心图像

我整理了一些允许缩放多个图像的js，并将4个图像放在一个简单的网格上