Alle Fotos Platz über css

Okay, habe ich diese.

Weiß nicht, wenn es zu spät ist oder was, aber ich habe kommen mit einer 100% reinem CSS erstellen quadratische thumbnails. Es ist etwas, dass ich versucht habe, eine Lösung zu finden für eine ganze Weile und kein Glück hatten. Mit etwas Experimentieren, ich habe es zu arbeiten. Die beiden wichtigsten Attribute für die Verwendung sind, OVERFLOW:HIDDEN und WIDTH/HEIGHT:AUTO.

Okay hier ist was zu tun ist:

Lassen Sie uns sagen, Sie haben einen Stapel von Bildern in unterschiedlichen Formen und Größen, manche Landschaft, manche Porträt, aber alle, natürlich, rechteckig. Das erste, was zu tun ist, zu kategorisieren, die Bild-links ("thumbnails"), indem Sie entweder hoch-oder Querformat, mit einem class-Selektor. Okay, also lasst uns sagen, Sie wollen nur zwei miniaturen, um diese einfacher. Sie haben:

img1.jpg (portrait) und
img2.jpg (Landschaft)

Für HTML würde es so Aussehen:

<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>

So, in diesem Punkt, da es keine css noch, würde der obige code geben Sie Ihre full-size-Bild als ein thumbnail, das wäre link, um die gleiche full-size-Bild. Recht, also hier ist der css-Code für beide hoch-und Querformat. Es gibt zwei Erklärungen für jeden (der link und die link ' s Bild):

.landscape {
        float:left;
        width:175px;     
        height:175px;    
        overflow:hidden;    
    }

.landscape  img{
        width:auto;
        height: 175px;   
    }

.portrait {
        float:left;
        width:175px;
        height:175px;
        overflow:hidden;    
    }

.portrait img {
        width:175px;    <-- notice these
        height: auto;   <-- have switched
    }

Die wichtigsten Dinge sind die Breite und Höhe und overflow:hidden. Float left ist nicht notwendig, für diese zu arbeiten.

In der Landschaft thumbnail Erklärung (.Landschaft) der bounding box ist eingestellt auf 175 x 175 und den overflow auf hidden gesetzt. Das bedeutet, dass alle visuellen Informationen größer als die mit 175px Platz wird von der Ansicht versteckt werden.

Für das Landschaftsbild Erklärung (.Landschaft img), die Höhe ist Fix auf 175px, die die Größe der ursprünglichen Höhe und die Breite auf auto gesetzt ist, ändert sich die Größe der ursprünglichen Breite, aber nur bis zu dem Punkt, der im Zusammenhang mit der bounding-Platz", in diesem Fall ist 175px. Also eher als smush die Breite nach unten in das Quadrat, es ist einfach das Kästchen füllt und dann jedes zusätzliche visuelle Informationen in die Breite (D. H. den überlauf) ist verborgen mit dem overflow:hidden.

Es funktioniert auf die gleiche Weise für Porträt -, nur, dass die Breite und Höhe eingeschaltet ist, wo ist die Höhe auto und width 175px. Grundsätzlich in jedem Fall, unabhängig von dimension überschreitet, der andere ist auf auto eingestellt, weil natürlich die größere dimension wäre die eine, überlauf außerhalb der eingestellten thumbnail-Abmessungen (175px x 175x).

Und wenn Sie möchten, fügen Sie Ränder zwischen Daumen, zum Beispiel eine 5px weißen Rand, können Sie mit der border-Eigenschaft, sonst gibt es keinen Spielraum, wo die Informationen zu überlaufen ist.

Hoffe, das macht Sinn.

InformationsquelleAutor der Antwort

Ich sehr Vorschlag der NailThumb jquery-plugin für jedermann, das ist suchen, dies zu tun. Es ermöglicht Ihnen das erstellen von square thumbnails ohne Verzerrungen. http://www.garralab.com/nailthumb.php

InformationsquelleAutor der Antwort user749798