width e height in rapporto tra di loro... ?

[freank]

Domanda un pò difficile da spiegare a parole. ci provo.
ho width che è, ad esempio, 100%
come faccio a fare in modo che height sia sempre due terzi di width ?

Ovvio dire che mettere 66% non funziona, in quanto è riferito alla grandezza del contenitore e non di width...

[tampertools]

con javascript

[Mich_]

Con un'immagine?

Esempio:

HTML:

<div id="container">
  <div id="sfondo">
    <img src="rettangolo" alt="*" />
  </div>
  <div id="content">
    ... tutto quello che vuoi ...
  </div>
</div>


CSS:

html, body {
  width: 100%;
}
#container {
  width: 100%;
  position: relative;  /* o anche absolute */
}
#sfondo {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
}
#sfondo img {
  width: 100%;
}
#content {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
}

L'immagine sara` un rettangolo di colore omogeneo con rapporto 3:2 (anche bianco, se vuoi)

Nota: se il #content e` piu` alto, la pagina si allunga

[freank]

mich scusa, da dove risulta il rapporto 3:2 ?
Se volessi cambiare tale rapporto ? Tipo 4:3 ...

p.s. si, si tratta di contenitori con dentro immagini ( che è bene non "strecciare")

[Mich_]

Il rapporto voluto e` dato proprio dall'immagine stessa.
Sono due livelli, di cui quello con l'immagine sta dietro e quello con il contenuto davanti.
Non ho usato gli attributi z-index, perche` per default il primo va sotto (e nel mio esempio HTML il blocco con l'immagine e` messo prima), ma se vuoi puoi usarli

Nota che l'immagine deve avere il rapporto voluto e deve essere uniforme, perche` verra` strecchata

E nota che se il contenuto va oltre lo spazio definito dall'immagine, il rapporto si perde.

[freank]

ecco. è proprio quello il problema.
Mi spiego : io non ho sempre una stessa immagine, ma devo creare un contenuto unico per immagini di dimensioni diverse ( possibilmente tramite css+html).
Per ora ho "arrangiato" con un metodo simile a quello pensato da te. Un div dietro con background nero e width :100% mentre altezza fissa e uno davanti con l'immagine di dimensioni 100% e 100%.
In tal modo un pò ci son riuscito... ma è un metodo molto arrangiato e che non va sempre bene...
cercavo una soluzione migliore ( e definitiva)

[Mich_]

<< mentre altezza fissa >>
questo e` l'errore: nel box dietro non devi fissare l'altezza, perche` deve prendere quella dell'immagine: se questa ha rapporto 3:2, l'altezza sara` i 2/3 della larghezza

<< uno davanti con l'immagine di dimensioni 100% e 100%. >>
Questo potrebbe modificare le proporzioni dell'immagine. L'immagine va inserita con una sola dimensione, se vuoi che non venga distorta, ma che mantenga la proporzione originale.

E ricorda che per poter dare dimensione 100%, occorre che la dimensione del contenitore sia definita
(ecco perche` nel mio esempio avevo messo
html, body {width: 100%}
) ma non tutti i browser risolvono nello stesso modo se manca qualche definizione.

[freank]

Attualmente uso questo metodo :

<div class="screen200container">
<div class="screen200">
<a href="http://blablabla">
<img class="imglast"  src="blabla.jpg" /></a>
</div></div>

dove il css è questo

.screen200container
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 6px 6px;
width: 98%;
float: left;}

.screen200 {
display: table-cell;
height: 146px;
background-color: black;
text-align: center;
vertical-align: middle;

.imglast {max-width: 100%;max-height: 100%;}

"perchè cavolo questo ragazzo usa display : table ?!" ti starai chiedendo.
L'ho fatto perchè era l'unico modo attraverso il quale potessi allineare verticalmente le immagini che avrebbero avuto i bordi neri sopra e sotto in quanto di proporzioni diverse.

Come lo miglioreresti ?
O dici che va bene così ed è meglio non toccarlo ? E' che lo vedo così arrangiato...

[Mich_]

Non e` che potresti scrivere i codici in maniera "umana"?
Scritti cosi` tutti in linea non si riesce a capire se ci sono errori.

E dato che ci sei separa anche HTML e CSS (nel tuo codice ci solno pezzi di CSS inseriti nell'HTML)

Ricorda che una buona visualizzazione del codice e` meta` dello sforzo richiesto lavoro sia per scrivere corretto che per correggere eventuali errori.

[freank]

m-ma ... hai letto subitissimo XD
l'ho corretto due secondi dopo aver inviato il messaggio... (tendo anche a levare link e cose inutili per non creare confusione)
è che non riesco a farlo direttamente quando scrivo la prima volta... devo sempre pubblicare il messaggio e poi editarlo...
se vedi la modifica fatta infatti risulta prima del tuo messaggio