Dimensioni immagini - tutte uguali ma responsive?

[SalvoDiMa]

Buongiorno a tutti,
ho creato un form per l'upload di immagini e tramite php le riduco ad un massimo di 200x200 mantenendo comunque le proporzioni (quindi, caricando 2 immagini diverse potrei avere ad esempio una da 160x100 ed una da 120x200).
Ho la necessità di mostrare queste immagini in una lista e, graficamente, sarebbe carino poterle mostrare ordinatamente tutte della stessa dimensione (sostanzialmente come facebook quando si apre un album di foto e compare la lista delle foto nei quadretti - cliccandoci sopra si apre la finestra modal).
Voi che soluzione adottereste? Grazie in anticipo

[bionicoz]

Beh che al caricamento con php oltre a salvarti, come già fai ora, l'immagine ridimensionata mantenendo le proporzioni, ti salvi anche una versione a dimensioni fissa, croppata in centro. Ma visto che hai postato in css, una soluzione da questo punto di vista potrebbe essere quella di crearti dei "quadretti" di dimensioni fisse e ad ognuno attribuire l'immagine di sfondo con la proprietà background-size:cover;

http://jsfiddle.net/bionicoz/8SE9a/

bb

[Mich_]

La soluzione e` semplice, se puoi fare un minimo di controllo lato server.

Lato client devi preparare tanti spazi quadrati (in linea di massima saranno dei <div> oppure dei <li>, a seconda del contesto), con le dimensioni che vuoi tu (possiamo pensarli 200x200px, ma la cosa funziona anche se sono definiti con altre unita` di misura. E` importante che la dimensione sia definita, altrimenti il 100% successivo non funziona.

Dentro a ciascuno di questi spazi ci devi mettere le tue immagini (tag <img>) in cui devi definire solo una dimensione al 100%.

In pratica le immagini verticali dovrebbero venir inserite con un tag che al browser arriva:
<img src="..." alt="..." style="height:100%" />

mentre le immagini orizzontali:
<img src="..." alt="..." style="width:100%" />

Nota che ho inserito lo stile in linea, per semplificare la formattazione lato server; in alternativa puoi definire rispettivam:
<img src="..." alt="..." class="imgvert" />
<img src="..." alt="..." class="imgorizz" />

e definire rispettivamente height e width nelle due classi

E` chiaro che lato server devi sapere se l'img e` vert o orizz, ed aggiungere lo style o la classe corrispondente.
Come fare questo, se nonlo sai fare da solo, dovresti chiederlo nel forum lato server che si occupa della tecnologia che usi.