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

Question

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

我需要将图片全部裁剪成正方形。我无法定义确切的测量值，因为它还需要 max-width:100% 才能使其成为响应式图像，从而调整其相对于容器的大小(相对于容器的宽度)浏览器)。

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

有什么想法吗？

我目前有:

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



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

Answer 1

使用 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 center images when scaling

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