Immagini in quadrato

[Francesco95]

Ora non ricordo bene, ma forse avevo inserito le misure nei tag img perchè non funzionava...
Infatti facendo così:
CSS:

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


}




#divimg4{
    
    clear: both;
    
}

Le immagini mi risultano a grandezza naturale (non al 30%) e sovrapposte...

EDIT:
avevo fatto un errore, ho funziona per quello che intendi, ora devo gestire le classi di orizzontale e verticale

[Mich_]

Devi anche mettere width:100% (oppure height:100%) alle singole immagini ...

.corpodimnormgalleria div {
  width: 30%;
  margin: 0 0 2.5% 2.5%;
  float: left;
}
.corpodimnormgalleria img {
  width: 100%;
}

Che poi, una volta definita la classe dentro le immagini potrebbe diventare:

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

[Francesco95]

Sìsì infatti nell'edit ho scritto che avevo corretto
La doppia classe come si gestisce?
E' la prima volta che la vedo sinceramente...

[Mich_]

Doppia classe? Non ne vedo la necessita`.

Riprendendo il codice HTML postato un po' indietro, la cosa dovrebbe essere:

  <div id='divimg1'> <img id="img1" src="..." alt="..." class="orizz" /> </div>
  <div id='divimg2'> <img id="img2" src="..." alt="..." class="vert" /> </div>
  ...

Poi il tuo programma (JS o altro) andra` a modificare gli attributi src, alt e class degli oggetti img1, img2, ...

[Francesco95]

Intendevo questa classe nella classe:

.corpodimnormgalleria img.vert

Comunque ora il codice è così:

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


}




.imgoriz{
	
	width: 100%;
	
}


.imgvert{
	
	height: 100%;
	
}


#divimg4{
	
	clear: both;
	
}

La gestione di oriz e vert funziona correttamente, ma nonostante ciò il div non mantiene una "forma quadrata" ma si adatta al 100% dell'immagine...

[Mich_]

Questo selettore e` pericoloso:
.corpodinormgalleria div div { ... }
ci possono essere altri oggetti che vengono toccati anche se non vuoi.

Vedrei meglio in questo caso l'uso del selettore discendente-diretto:
.corpodinormgalleria > div > div { ... }
che comunque non mi convince del tutto, perche` in caso di modifica del codice HTML potrebbe fallire


Quello che chiami classe nella classe e` una cosa perfettamente valida in ogni browser.
.corpodinormgalleria img.vert { ... }

Praticamente vuol dire che all'interno di tutti gli elementi con classe .corpodinormgalleria vai a cercare tutti gli oggetti <img> che hanno classe .vert


PS: nota che esistono anche le classi doppie:
<div id="..." class="nome1 nome2">
che e` soggetto alla formattazione di ambedue le classi

----

Il div non ha forma quadrata perche` non ne definisci l'altezza. Immagino invece che la larghezza di ogni "cella" sia corretta.

Visto che sai lavorare con JS e che comunque il tutto senza JS non funziona, puoi rilevare la larghezza (in px) dei singoli oggetti e fissare l'altezza uguale.
(ora io non ricordo la sintassi corretta per rilevare la dimensione, ma non credo che avrai difficolta` a trovarla)

[Francesco95]

Quello che chiami classe nella classe e` una cosa perfettamente valida in ogni browser.
.corpodinormgalleria img.vert { ... }

Praticamente vuol dire che all'interno di tutti gli elementi con classe .corpodinormgalleria vai a cercare tutti gli oggetti <img> che hanno classe .vert

E cosa cambia dichiararlo come classe a sè stante?
Che se trova un elemento di classe .vert NON dentro un oggetto con classe .corpodimnormgalleria lo ignora?

Si si le classi multiple le conosco

E si non definisco l'altezza perchè dovrebbe essere uguale alla larghezza...
Con js però avrei il problema che dovrebbe aggiornarsi anche sui resize... però immagino ci sia un evento onresize...
Piuttosto, per centrare le immagini non quadrate al centro del div?

[Mich_]

E cosa cambia dichiararlo come classe a sè stante?
Che se trova un elemento di classe .vert NON dentro un oggetto con classe .corpodimnormgalleria lo ignora?

esatto

E si non definisco l'altezza perchè dovrebbe essere uguale alla larghezza...

un discorso di questo tipo e` valida per le immagini che hanno un loro rapporto intrinseco, ma non vale per i <div>

{quote]Con js però avrei il problema che dovrebbe aggiornarsi anche sui resize... però immagino ci sia un evento onresize...[/quote]Esiste l'evento onresize, ma forse non serve (potrebbe essere automatico)

Piuttosto, per centrare le immagini non quadrate al centro del div?

Per gli orizzontali si usano i margini automatici; per i verticali si usa il line-height per gli oggetti di tipo inline, e` un po' piu` complesso per gli oggetti di tipo block (vedi link utili):

.vert {
  height: 100%;
  margin 0 auto;
}
.orizz {
  width: 100%;
  height: ... da definire ...
  line-height: ... impostare uguale a height ...  /* per centrare in vert. un oggetto di tipo inline */
}

[Francesco95]

Ma i div non avevi detto che erano block?

vedi link utili

Non mi hai postato nessun link

[Mich_]

I <div> sono blocchi, ma le <img> sono inline: e qui si tratta di allineare al centro immagini dentro i <div>

I "link utili" sono uno delle prime discussioni del forum.