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

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中心图像

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

Answer 2

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

超文本标记语言

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