Rendere tutte le foto quadrate via css

Question

Sto provando a fare una serie di foto in foto quadrate. Possono essere rettangolari orizzontalmente (cioè 600x400) o verticalmente (400x600), ma voglio ottenerli 175x175 in entrambi i modi. Il mio pensiero era di raggiungere l'altezza massima o la larghezza massima del lato più piccolo, e non consentire un overflow superiore a 175 px sul lato più grande ... tuttavia, sto avendo problemi con esso.

E 'possibile con css?

Qui di seguito è il mio tentativo, ma dando rettangoli ancora:

<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

Consiglio vivamente il plugin jQuery di NailThumb per chiunque stia cercando di farlo. Ti permette di creare miniature quadrate senza distorsioni. http://www.garralab.com/nailthumb.php

Answer 2

È possibile impostare la larghezza/altezza del div genitore quindi impostare il tag img bambino a width: 100%; altezza: auto;

Questo ridurrà l'immagine verso il basso per cercare di adattare il genitore con proporzioni in mente.

È inoltre possibile impostare l'immagine come immagine di sfondo sul div Quindi, se è possibile utilizzare css3, è possibile modificare la proprietà di sfondo. attributi di essa sono: contengono, la copertura, o un'altezza specificed (50%, 50%) (175px, 175px) si potrebbe anche provare a centrare l'immagine con background-position

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

Answer 3

Questo potrebbe aiutare.

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> 

Questo ha funzionato per me. Basta inserire l'URL per l'immagine all'interno del div.

Answer 4

Ok, ho capito.

Non so se è troppo tardi o cosa, ma ho trovato un modo puro al 100% CSS per creare miniature quadrate. È qualcosa che ho cercato di trovare una soluzione per un bel po 'e non ho avuto fortuna. Con qualche sperimentazione, ho funzionato. I due attributi principali da utilizzare sono OVERFLOW: HIDDEN e WIDTH/HEIGHT: AUTO.

Ok, ecco cosa fare:

Diciamo avete una serie di immagini di varie forme e dimensioni, un po 'di paesaggio, un po' di ritratto, ma tutti, ovviamente, di forma rettangolare. La prima cosa da fare è categorizzare i link delle immagini (miniature) da verticale o orizzontale, usando un selettore di classe. Ok, quindi diciamo che vuoi solo creare due miniature, per semplificare questo. si dispone di:

img1.jpg (ritratto) e img2.jpg (paesaggio)

Per HTML sarebbe simile a questa:

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

Quindi, a questo punto, dal momento che non v'è alcun css ancora, il codice sopra vi darà la vostra immagine a grandezza naturale come una miniatura che si collegherebbe alla stessa immagine a grandezza naturale.Bene, quindi ecco il css sia per il ritratto che per il paesaggio. Ci sono due dichiarazioni per ogni (il link e l'immagine del 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 
    } 

Le cose più importanti sono la larghezza e l'altezza e l'overflow: hidden. Il float a sinistra non è necessario perché funzioni.

Nella dichiarazione di anteprima del paesaggio (.landscape) il riquadro di delimitazione è impostato su 175 x 175 e l'overflow è impostato su nascosto. Ciò significa che qualsiasi informazione visiva maggiore di quella contenente 175 px quadrati sarà nascosta alla vista.

Per la dichiarazione dell'immagine del paesaggio (.landscape img), l'altezza è fissata a 175 px, che ridimensiona l'altezza originale e la larghezza è impostata su auto, che ridimensiona la larghezza originale, ma solo fino al punto di rapportarsi al quadrato limite, che in questo caso è 175 px. Quindi, piuttosto che spingere la larghezza in basso nel quadrato, riempie semplicemente il quadrato e quindi qualsiasi informazione visiva aggiuntiva nella larghezza (ad esempio l'overflow) è nascosta con l'overflow: nascosto.

Funziona allo stesso modo per il ritratto, solo che la larghezza e l'altezza sono commutate, dove l'altezza è automatica e la larghezza è 175px. Fondamentalmente in ogni caso, qualunque dimensione eccede l'altra è impostata su auto, perché naturalmente la dimensione più grande sarebbe quella che traboccherebbe al di fuori delle dimensioni dell'anteprima impostata (175 px x 175x).

E se si desidera aggiungere margini tra i pollici, ad esempio un margine bianco di 5px, è possibile utilizzare la proprietà border, altrimenti non vi sarà margine in cui le informazioni stanno straripando.

Spero che questo abbia senso.

Answer 5

Determina larghezza e altezza dell'immagine, quindi classe verticale o orizzontale attiva dell'immagine. Se ritratto fare {height:175px; width:auto}. Se paesaggio, inverti l'altezza e la larghezza.