Imposta l'altezza di un div in modo che diventi la metà della larghezza

Question

Come posso impostare l'altezza di un div esattamente uguale alla metà della larghezza, quando la larghezza cambierà in base alla dimensione dello schermo dell'utente?

Ho la seguente impostato su un div ...

#div1 { 
    min-width:400px; 
    width:100%; 
    max-width:1200px; 
    height:400px; 
    background-color:red; 
} 

La larghezza funziona bene su questo, si blocca a 400 pixel se lo schermo diventa troppo stretta e si ferma anche espandendo a 1200 pixel se la lo schermo diventa troppo grande. Ma voglio anche che l'altezza cambi esattamente della metà della larghezza in un dato momento. Qualcosa di simile ...

#div1 { 
    min-width:400px; 
    width:100%; 
    max-width:1200px; 
    height:width/2; 
    background-color:red; 
} 

che non ha funzionato (che non mi aspettavo davvero a).

Preferirei usare CSS se è possibile, ma come mi piacerebbe anche l'altezza da cambiare se l'utente aggiusta manualmente anche la dimensione della finestra di internet (come succede con la larghezza al momento). Non sono sicuro che sia possibile con i CSS, tuttavia, se c'è un modo per ottenere questo risultato da Jquery, sarei felice di usarlo anche io.

jsFiddle of the above for reference.

Qualcuno mi può aiutare?

Answer 1

Se siete male con il supporto solo i browser moderni, si può fare questo: http://jsfiddle.net/kNPfh/

La misura vw è in 1/100th della larghezza finestra, in modo da 50vw è il 50% della larghezza dello schermo.

<div class='halfwidth'></div> 

.halfwidth { 
    width: 100%; 
    height: 50vw; 
    background-color: #e0e0e0; 
} 

in caso contrario, è possibile utilizzare: http://jsfiddle.net/ff7WC/

$(window).on('resize', function() { 
    $('.halfwidth').height($(this).width()/2); 
}).resize(); 

Answer 2

Questo non è possibile con puro CSS. Devi usare jQuery per generare le nuove dimensioni. ho trovato questo in SO: Using jQuery To Get Size of Viewport

Answer 3

si può fare con l'aiuto di imbottitura su un elemento principale, perché imbottitura relativa (anche in altezza saggio) si basa sulla larghezza dell'elemento.

CSS:

.imageContainer { 
    position: relative; 
    width: 25%; 
    padding-bottom: 25%; 
    float: left; 
    height: 0; 
} 

img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
} 

Per i dettagli, si veda questo articolo sul tema http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

È inoltre possibile utilizzare jQuery per questo, qualcosa di simile a:

$('.ss').css('height',width()/2); 

Scegliere questo come la risposta corretta se risolve il dubbio facendo clic sul simbolo di spunta a sinistra.

Answer 4

Assicurarsi di avere un file js quindi utilizzare questo

$(window).load(function(){ 
    $('.element').height($('.element').width()/2); 
    $(window).resize(function(){ 
     $('.element').height($('.element').width()/2); 
    }); 
}); 

http://jsfiddle.net/Hive7/8CNtU/2/