CSS 100% altezza su larghezza

Question

E 'possibile anche aumentare la larghezza del 100% di altezza utilizzando solo CSS? Senza usare Javascript o simili.

{ 
    width: /*100% of height*/ 
} 

Answer 1

Ci sono nuove unità css per questo

width: 100vh; 

Ciò significa che la larghezza dell'elemento sarà 100% dell'altezza finestra.

CSS3 ha alcuni nuovi valori per dimensionare le cose relative alla dimensione attuale della vista : vw, vh e vmin. Un'unità su uno dei tre valori è l'1% dell'asse della vista. "Viewport" == dimensione della finestra del browser == oggetto finestra. Se il viewport è largo 40 cm, 1vw == 0,4 cm.

1vw = 1% della larghezza finestra 1VH = 1% dell'altezza finestra 1vmin = 1vw o 1VH valore minore 1vmax = 1vw o 1VH, se superiore (css-tricks post)

Riferimento: https://developer.mozilla.org/en-US/docs/Web/CSS/length

PS: il supporto per queste nuove proprietà è in realtà abbastanza buono nei browser moderni. See here

Answer 2

Questa domanda Height equal to dynamic width (CSS fluid layout) sembra avere una buona risposta solo CSS di Nathan Ryan. Vale anche la pena leggere i commenti sotto la sua risposta per ulteriori spiegazioni. Spero che aiuti.

Se si trova la soluzione troppo complessa, potrebbe valere la pena dare più contesto a ciò che si sta cercando di ottenere nel caso in cui qualcuno abbia una buona soluzione alternativa.