Beschneiden Sie ein Bild mit Prozentsätzen und maximalen Breiten auf das Quadrat.

Question

Ich arbeite an einer reaktionsschnellen Site, daher kann ich keine Setbreiten verwenden.

Ich brauche Bilder, um alle auf Platz zu schneiden. Ich kann die genauen Maße nicht definieren, weil es auch max-width:100% haben muss, um es zu einem reagierenden Bild zu machen, das seine Größe bezüglich des Behälters justiert (die relativ zur Breite des Browsers ist).

Ich habe viele Lösungen gesehen, die die Verwendung background-image vorschlagen, aber das ist nicht möglich, es muss ein img Tag sein. Es muss auch in IE8 funktionieren.

Irgendwelche Ideen?

Im Moment habe ich: versteckt ich ein Quadrat von 100px gemacht haben Sie Ihre eigene Größe definieren:

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



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

Answer 1

Sie so etwas wie Überlauf tun.

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

mit padding-bottom zusammen mit Positionierung und overflow:hidden können Sie einen ansprechenden Platz Container erstellen:

.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

aufgeräumt I mehrere Bilder erlauben einige der js oben skaliert werden und setzen 4 Bilder auf einem einfachen Gitter