Immagine ridimensionata.

[kurtdc]

Ciao, non so se è la sezione giusta, ma ci provo.
Questo è il mio problema:
devo creare una pagina che mi mostri in una div delle immagini scelte da diversi thumbinall disponibili (un po come succede su ebay annunci per intenderci).

Supponiamo che il mio div sia 400x400 e io voglio che l'immagine vada a posizionarsi li con le dimensioni giuste. Per fare questo, devo necessariamente ridimensionare fisicamente l'immagine (tipo con il php), o esiste qualche proprietà css ad esmpio che mi fa questa cosa senza modificare fisicamente l'immagine?

non so se sono riuscito a spiegarmi, spero possiate aiutarmi!

grazie

[Henry.Chinaski]

Lascia il div senza dimensioni; si adatterà alle dim dell'immagine caricata al suo interno; altrimenti imponi uno style (inline) all'immagine con le dim necessarie al tuo intento

[kurtdc]

Ciao,
il problema è proprio che io volgio che l'immagine si adatti al div e non che il div si adatti all'immagine.
Quindi facendo come hai detto tu (div senza dimensioni) non credo vada bene allo scopo.
mentre se metto inline le dimensioni all'immagine questa viene ridimensionata? ma poi come ne mantengo le proporzioni per non farla venire schiacciata?

[Mich_]

Tendenzialmente non e` buona cosa usare formattazione inline (si mescola contenuto con formattazione).

Comunque se definisci solo UNA dimensione, l'altra dovrebbe autodimensionarsi per mantenere la proporzione.

Esempio:

#contenitore div {
  width: 400px;
  height: 400px;
}
#contenitore div img {
  width: 80%;           /* definisco solo larghezza */
  margin: auto;        /* centro immagine nel blocco */ 
  display: block;      /* altrimenti le dimensioni non hanno effetto */
  overflow: ...           /* cosa deve fare se altezza img supera div */
}

[kurtdc]

Si anche io preferisco non mettere contenuto inline!

cmq , come mi stai consigliando tu in pratica, l'immagine si posiziona al centro della div e occuperà l'80% della larghezza, giusto?

ma in questo modo le proporzioni vengono conservate o vedrò l'immagine allargata/schiacciata?

[Mich_]

Originariamente inviato da kurtdc
Si anche io preferisco non mettere contenuto inline!

cmq , come mi stai consigliando tu in pratica, l'immagine si posiziona al centro della div e occuperà l'80% della larghezza, giusto?

Esatto.
Veramente al centro solo in orizzontale: per centrare in vert. occorre aggiungere:
line-height: 400px;

ma in questo modo le proporzioni vengono conservate o vedrò l'immagine allargata/schiacciata?

Stando alle specifiche le proporzioni vengono conservate.
Poi sta ai browser comportarsi in modo conforme. Non ti resta che provare

[kurtdc]

sto facendo delle prove ma non riesco ad ottenere il risultato desiderato, forse sbaglio qualcosa.
spiego meglio la situazione.

Ho un div principale:

#contentgall { 	
float: left; 	
width: 810px; 	
margin-top: 15px; 	
background: url(images/img10.jpg) no-repeat left top; 	 
}

il quale conterrà al massimo altri 9 div di questo tipo:

#gall {
	background: url(images/gall.jpg) no-repeat left top;
	width:260px;
	height:260px;
	margin: 0 5px 10px 5px;
	float:left;
	}

il div gall sarà quindi il div che dovrà contere l'immagine di cui parlavo, quindi come mi hai suggerito tu ho definito:

#gall img  {
	width: 80%;           /* definisco solo larghezza */
  	margin: auto;        /* centro immagine nel blocco */ 
  	display: block;      /* altrimenti le dimensioni non hanno effetto */
  	overflow: hidden;           /* cosa deve fare se altezza img supera div */
}

ma non ottengo cio che deisdero, infatti l'immagine non si posiziona al centro neanche orizzontalmente, crea un margine di 20 px a sinistra e 20 a destra...
dov'è che sbaglio?

considera inoltre che in ogni div di tipo gall, ho anche un testo di tipo h1 che ho cosi definito:

#gall h1 {
	margin: 0;
	padding: 15px 0 0 0;
	line-height: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:25px;
	text-align:center;
	color: #FFFFFF; 
}

grazie mille per l'aiuto!

[kurtdc]

ho apportato alcune modifiche e devo dire che il risultato ottenuto è abbastanza buono,a cnhe se ora ho il problema che se l'immagine è sviluppata in larghezza (quindi larghezza maggiore dell'altezza) l'immagine si "attacca" alla scritta <h1> e lascia molto spazio sotto, quindi non si centra in altezza diciamo.

cmq avevo pensato di crare due regole css, una per le immagini alte e strette e una per quelle basse e larghe, e poi co il php, faccio un controllo per scegliere uno o l'altro div.

che ne dici?

[kurtdc]

scusa se ti secco ancora
come faccio ad allineare il contenuto di un div verticalmente?

[Mich_]

Anzitutto nei codici postati mi sembra di vedere errori, ma forse li hai poi corretti.

Comunque quando posti codice CSS, posta anche l'HTML corrispondente, altrimenti non si capisce a cosa si riferisce il CSS. E posta anche la DTD (sta nel DOCTYPE), perche` i brwoser IE intepretano diversamente a seconda della DTD.

Non so esattamente cosa intendi per "allineare verticalmente". In linea di massima tutti gli oggetti sono gia` allineati verticalmente in alto.
Se il tuo problema e` centrare verticalmente, ci sono due metodi fondamentali: se si tratta solo di immagini (o comunque oggetti di tipo inline), ti basta dare l'altezza della linea uguale all'altezza del contenitore; se invece sono elementi di tipo blocco, occorre usare i posizionamenti.