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

演示

缩放时的jQuery DEMO中心图像

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

Answer 2

你可以做类似溢出：隐藏我已经做了一个100px的正方形你可以定义你自己的大小。

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