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

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

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

2 个答案: