使用百分比和最大寬度將圖像裁剪爲正方形

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幅圖像上的簡單的網格