Immagini in quadrato

[Francesco95]

Vorrei che le immagini di una galleria fossero in dei quadrati cliccabili, ora, il problema è che per immagini quadrate o con la base più grande dell'altezza va tutto bene dato che ho impostato:

.corpodimnormgalleria img{

width: 30%;
margin-left: 2.5%;
margin-bottom: 2.5%;
float: left;

}

così mi vengono automaticamente scalate e ridimensionate le immagini, il problema è su un immagine verticale... ovvero viene si scalata, ma l'altezza rimane maggiore...
Dovrei impostare una cosa tipo:
height=width, ma non trovo niente a riguardo...

[likioti687]

prova usando max-width e max-height

[Francesco95]

E cosa gli metto come valore...?

[Mich_]

Supponendo che le "celle" siano degli oggetti di tipo blocco con dimensioni definite e quadrate:

- nel CSS delle immagini orizzontali (ovvero in cui la larghezza e` > dell'altezza) inserisci:
width:100%;

- in quello delle immagini verticali:
height: 100%;

[Francesco95]

Ti ringrazio ma,
Le dimensioni sono scalabili per rendere il sito responsive...
E le immagini non so a priori in che formato sono...

[Mich_]

Ti ringrazio ma,
Le dimensioni sono scalabili per rendere il sito responsive...

Questo non e` un problema. L'importante e` che i "quadrati" siano degli oggetti di tipo blocco e che abbiano dimensioni definite (non importa se sono in %, purche` siano definite correttamente

E le immagini non so a priori in che formato sono...

Pero` il server puo` saperlo al momento in cui le inserisce; a quel punto basta aggiungere lo stile al tag:
<img src="..." alt="..." class="img-orizz" />
<img src="..." alt="..." class="img-vert" />

e poi nel CSS definisci le due classi:

.img-orizz {
  width:100%;
}
.img-vert {
  height: 100%;
}

[Francesco95]

mhm in realtà le immagini sono semplici img in dei div senza dimensione (div che per ora potrebbero anche non esserci)
le immagini sono dimensionate come width 30% del macrocontenitore (corpo)
altra cosa, le immagini le inserisco con js, però potrei passare tramite ajax i dati sul loro orientamento...

[Mich_]

Se vuoi fare una cosa fatta bene, semplice da programmare ed eventualmente da modificare, la cosa migliore e` che le varie "celle" (o "quadrati") siano dei blocchi. Poi alla fine le celle saranno invisibili: servono solo per sistemare gli spazi destinati ad ogni immagine. Tali celle possono avere dimensione 30%, ed anche avere una dimensione minima (di modo che se poi sono troppo piccole, ce ne staranno due in una riga invece di tre, ma il tutto resta ragionevolmente formattato).

Non capisco come puoi inserire le immagini con JS (significa lato client?), comunque anche con JS puoi determinare quale dimensione e` maggiore dell'altra, ed applicare la classe corrispondente.

[Francesco95]

Tramite js cambio gli src degli img...
Allora le colonne già le gestisco tramite float e clear nei css, passando da 3 a 2 a 1 a seconda della larghezza...
In che modo intendi blocchi?
Intendi la proprietà display:block o fare una tabella?
Cioè ora il mio codice è questo:
HTML:

<br>\
                <div id='divimg1'><img id='img1'></div>\
                <div id='divimg2'><img id='img2'></div>\
                <div id='divimg3'><img id='img3'></div>\
                <div id='divimg4'><img id='img4'></div>\
                <div id='divimg5'><img id='img5'></div>\
                <div id='divimg6'><img id='img6'></div>\

CSS:

.corpodimnormgalleria img{
    
    width: 30%;
    margin-left: 2.5%;
    margin-bottom: 2.5%;
    float: left;


}


#img4{
    
    clear: both;
    
}

con poi le varia media queries per adattare le colonne

[Mich_]

Anzitutto occorre che impari ad inserire i codici nel forum: devi inserirli tra i VBtag [ code ] e [ /code ] (senza gli spazi), altrimenti si perde la formattazione.

I div sono blocchi di default, per cui non hai problemi.
Il 30% va inserito nel tag <div> e non nel tag <img>. Questo ti formatta ciascuno spazio che poi conterra` le immagini in modo che siano tutti uguali.
Poi le immagini avranno una dimensione al 100%.

Per le prove ti consiglio di dare un colore di sfondo ai tuoi div: tu hai necessita` di vedere come reagisce il browser alla tua programmazione. Poi il colore lo toglierai quando il sito va in produzione.