Machen alle Fotos Platz über CSS

Question

Ich versuche, eine Reihe von Fotos in quadratische Fotos zu machen. Sie können horizontal (d. H. 600x400) oder vertikal (400x600) rechteckig sein, aber ich möchte, dass sie in beide Richtungen 175x175 sind. Mein Gedanke war, auf der kleineren Seite Max-Höhe oder Max-Breite, und nicht erlauben überlauf über 175px auf der größeren Seite ... aber ich habe Probleme damit.

Ist das mit CSS möglich?

Below mein Versuch, aber es Rechtecken gibt nach wie vor:

<div style="min-height:175px; overflow:hidden; max-height:175px;"> 
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png"> 
</div> 

Answer 1

Ich empfehle das NailThumb jQuery Plugin für alle, die dies tun wollen. Es ermöglicht Ihnen, quadratische Thumbnails ohne Verzerrung zu erstellen. http://www.garralab.com/nailthumb.php

Answer 2

Sie die Breite/Höhe des übergeordneten div das Tag Kind img auf Breite eingestellt dann eingestellt werden: 100%; Höhe: Auto;

Das wird das Bild skalieren, um zu versuchen, die Eltern mit Aspektverhältnis zu berücksichtigen.

Sie können auch das Bild als Hintergrundbild auf der div setzen Wenn Sie dann css3 verwenden können Sie mit der Hintergrundgröße Eigenschaft Chaos. Es Attribute sind: enthalten, Abdeckung oder eine specificed Höhe (50%, 50%) (175px, 175px) Sie könnten auch versuchen, das Bild mit Hintergrund-Position zum Zentrum

<div style="background-image:url(some.png); background-size: cover; background-position: 50%"> 

Answer 3

Diese helfen könnte.

CSS:

.image{ 
-moz-border-radius: 30px; /* FF1+ */ 
-webkit-border-radius: 30px; /* Saf3-4 */ 
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */ 
} 

HTML:

<div class="image"></div> 

Das ist für mich gearbeitet. Setzen Sie einfach die URL auf das Bild innerhalb des div.

Answer 4

Okay, ich habe das.

Ich weiß nicht, ob es zu spät ist oder was, aber ich habe eine 100% reine CSS-Methode entwickelt, um quadratische Thumbnails zu erstellen. Es ist etwas, für das ich schon lange eine Lösung gesucht habe und kein Glück hatte. Mit etwas Experimentieren habe ich es funktioniert. Die wichtigsten zwei Attribute sind OVERFLOW: HIDDEN und WIDTH/HEIGHT: AUTO.

hier in Ordnung ist, was zu tun ist:

Angenommen, Sie haben einen Stapel von Bildern mit unterschiedlichen Formen und Größen, einige Landschaft, einige Porträt, sondern alle, natürlich, rechteckig. Das erste, was zu tun ist, kategorisieren Sie die Bildlinks (Thumbnails) entweder im Hoch- oder Querformat, mit einem Klassenselektor. Okay, nehmen wir an, Sie möchten einfach nur zwei Miniaturansichten erstellen, um dies zu vereinfachen. Sie haben:

img1.jpg (Hochformat) 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> 

Also, an dieser Stelle, da es keine CSS Mit dem obigen Code erhalten Sie jedoch Ihr Bild in voller Größe als Miniaturansicht, die mit demselben Bild in voller Größe verknüpft ist.Richtig, also hier ist das CSS für Portrait und Landschaft. Es gibt zwei Erklärungen für jede (der Link und das Image des Link):

.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 der Überlauf: versteckt. Float left ist nicht notwendig, damit dies funktioniert.

In der Landschafts-Thumbnail-Deklaration (.landscape) wird die Bounding Box auf 175 x 175 gesetzt und der Überlauf auf Versteckt gesetzt. Das bedeutet, dass alle visuellen Informationen, die größer als die mit einem 175-Pixel-Quadrat sind, nicht sichtbar sind.

Für die Landschaftsbilddeklaration (.landscape img) ist die Höhe auf 175px festgelegt, wodurch die ursprüngliche Höhe und die Breite auf auto gesetzt werden, wodurch die ursprüngliche Breite geändert wird, jedoch nur bis zu dem Punkt begrenzendes Quadrat, das in diesem Fall 175px ist. Anstatt also die Breite nach unten in das Quadrat zu streichen, füllt sie einfach das Quadrat und dann werden alle zusätzlichen visuellen Informationen in der Breite (d. H. Der Überlauf) mit dem Überlauf verborgen.

Es funktioniert genauso für Hochformat, nur dass die Breite und Höhe gewechselt wird, wo die Höhe automatisch ist und die Breite 175px ist. Grundsätzlich wird in jedem Fall die Dimension, die die andere überschreitet, auf auto gesetzt, da die größere Dimension natürlich diejenige ist, die außerhalb der festgelegten Miniaturansichten (175px x 175x) überläuft.

Und wenn Sie Ränder zwischen Thumbs hinzufügen möchten, zum Beispiel einen weißen 5px-Rand, können Sie die border -Eigenschaft verwenden, sonst wird es keinen Rand geben, wo die Informationen überlaufen.

Hope das macht Sinn.

Answer 5

Bestimmen Sie Breite und Höhe des Bildes, dann aktive Hoch- oder Querformatklasse des Bildes. Wenn Porträt tun {height:175px; width:auto}. Wenn Landschaft, umgekehrte Höhe und Breite.