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

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

你可以这样做溢出：隐藏 我做的100像素的正方形，你可以定义自己的尺​​寸。

HTML

<div id="frame"> 
<img src="your image"/> 
</div> 

使用CSS定位与沿padding-bottom和

#frame{ 
width:100px; 
height:100px; 
overflow:hidden; 
} 

#frame img{ 
width:auto; 
height:100%; 
min-width:100px; 
min-height:100px; 
} 

Answer 2

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幅图像上的简单的网格