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

【问题标题】：Crop an image to square using percentages and max widths使用百分比和最大宽度将图像裁剪为正方形
【发布时间】：2013-05-17 09:11:48
【问题描述】：

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

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

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

有什么想法吗？

我目前有：

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



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

【问题讨论】：

标签： css image internet-explorer-8 crop

【解决方案1】：

你可以做一些类似溢出的事情：隐藏我制作了一个 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;
}

【讨论】：

这个答案是固定宽度，不响应，希望响应。 @duncan-beattie 上面有响应式的答案。

【解决方案2】：

使用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 个图像放在一个简单的网格上

【讨论】：

这很好，但有没有办法让它裁剪到中心而不是右上角？或者至少是顶部居中而不是左上角。
我能想到的唯一方法就是向它扔一些 jquery - jsfiddle.net/duncan/ecK7d/2 代码有点乱，但它可以完成工作
您可以通过执行以下操作从中心裁剪： .field-content img { position: absolute;最高：50%；左：50%；宽度：自动；最小宽度：100%；最小高度：100%；变换： translateX(-50%) translateY(-50%); }