Przycinanie obrazu do kwadratu przy użyciu wartości procentowych i maksymalnych szerokości

Question

Praca w responsywnej witrynie, więc nie mogę użyć ustawionych szerokości.

Potrzebuję zdjęć do wszystkich zbiorów do kwadratu. Nie mogę zdefiniować dokładnych pomiarów, ponieważ musi również mieć max-width:100%, aby uczynić z niego obraz responsywny, dostosowujący jego rozmiar względem kontenera (który jest zależny od szerokości przeglądarki).

Widziałem wiele rozwiązań sugerujących użycie background-image, ale nie jest to możliwe, musi to być znacznik img. Musi również działać w IE8.

Wszelkie pomysły?

Obecnie mam:

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



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

Answer 1

można zrobić coś takiego przelewu: ukryty Zrobiłem plac 100px można zdefiniować własny rozmiar.

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

Answer 2

użyciu padding-bottom wraz z pozycjonowaniem i overflow:hidden można stworzyć elastyczne kwadratowego pojemnika:

.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

I uporządkował niektóre js umożliwiających wielokrotne obrazy mają być skalowane i umieścić 4 zdjęcia na prostej siatce