Posso programmare l'altezza div per essere una certa percentuale della sua larghezza attuale?

Question

E 'possibile dare a div una larghezza che è una percentuale della finestra, e un'altezza che è una certa percentuale della sua larghezza attuale? Quindi il div ridimensiona, ma mantiene lo stesso rapporto quando ridimensiona la finestra del browser.

Grazie Ciao

Answer 1

C'è il padding trucco, già risposto, ma io uso un altro approccio, envolving due div annidati.

Quello genitore, ho impostato la larghezza. Il bambino, io uso il valore height come unità container vw - (significa viewport width).

It works well, see here (ridimensionare la finestra)

<div> 
    <div></div> 
</div> 

CSS:

div { 
    width: 100%; 
} 

div > div { 
    background: silver; 
    height: 10vw; 
} 

Answer 2

Se si imposta il padding superiore e inferiore di un elemento in percentuali sarà relativo alla larghezza dell'elemento.

Answer 3

Sì con jQuery è possibile ottenere la larghezza dello schermo e l'altezza, quindi è possibile indirizzare tale div e impostare l'altezza e la larghezza

http://api.jquery.com/width/

setting width of div jquery

Answer 4

usa questo

DEMO 1

.aspect-ratio { 
    max-width: 100%; 

} 
.aspect-ratio:before { 
    content: ''; 
    display: block; 
    width: 100%; 
    padding-bottom: ({height-aspect}/{width-aspect} * 100)%; // for 3 x 4, for instance: 75% 
} 

DEMO 2

se si preferisce di meno come me, si può fare una mixin:

.aspectRatio(@widthAspect, @heightAspect) { 
    @aspect: @heightAspect/@widthAspect * 100; 
    max-width: 100%; 

    &:before { 
     content: ''; 
     display: block; 
     width: 100%; 
     padding-bottom: ~"@{aspect}%"; 
    } 
} 

Answer 5

Quando si utilizza una percentuale in height, è calcolata rispetto all'altezza del blocco contenitore del riquadrato generato.

Poiché si desidera calcolarlo rispetto alla larghezza, è possibile utilizzare, ad esempio, padding-top.

Per evitare che si ripercuotano sul contenuto, posizionarli in un involucro assolutamente posizionato.

#wrapper { 
 
    padding-top: 25%; /* ratio */ 
 
    border: 1px solid; 
 
    position: relative; 
 
} 
 
#content { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
    <p>Foo</p> 
 
    <p>Bar</p> 
 
    <p>Baz</p> 
 
    </div> 
 
</div>