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

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>

- Francesca

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实现缩放图片居中展示的演示

我整理了一些JS代码，允许多张图片进行缩放，并将4张图片放在一个简单的网格中展示。

- Duncan Beattie

---

这很棒，但有没有办法让它裁剪到中心而不是右上角？或者至少是顶部中心而不是左上角。 - Francesca

我能想到的唯一方法就是在其中加入一些jQuery - http://jsfiddle.net/duncan/ecK7d/2/ 代码有点乱，但它能完成任务。 - Duncan Beattie

您可以通过以下方式从中心进行裁剪： .field-content img { position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; min-height: 100%; transform: translateX(-50%) translateY(-50%); } - xon1c

Answer 2

你可以使用 overflow:hidden 这样的方法。 我已经制作了一个 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;
}

- edd

---

这个答案的宽度固定，不能自适应，提问者想要自适应。@duncan-beattie在上面给出了自适应的答案。 - John Shipp