CSS: Mantenere di un div altezza relativa alla sua larghezza

Question

La mia domanda è molto simile a questa domanda: CSS: 100% width or height while keeping aspect ratio?

Ho un div la cui posizione è fissa. La larghezza del div deve essere 100% e il suo altezza esattamente 1/6 della sua larghezza. C'è un modo -webkit-calc() per farlo?

Nota: Le soluzioni JS non sono preferite in quanto un cambiamento di zoom/orientamento può influire sulla larghezza/altezza.

Answer 1

E 'questo quello che cercate? Non sto usando -webkit-calc() affatto. Ho inserito un'immagine 1px per 6px in un esterno div a cui è stato applicato position: fixed e l'immagine per avere un width di 100% e position: relative. Poi ho aggiunto un interno div che è posizionato in modo assoluto per essere alto e largo come il suo antenato.

Ora è possibile modificare la larghezza del esterna div, e le immagini impostazione width: 100% farà in modo che sia l'esterno e l'interno div 's sono garantiti per avere sempre un'altezza pari a 1/6 di loro larghezza (o almeno il più vicino possibile a quello che può ottenere, le altezze saranno arrotondate al numero intero più vicino di pixel). Qualsiasi contenuto potrebbe andare all'interno dello div interno.

HTML

<div> 
    <div></div> 
    <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" /> 
</div> 

CSS

html, body { 
    margin: 0px; 
    padding: 0px; 
} 
div { 
    position: fixed; 
    width: 100%; 
} 
div > div { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px;  
} 
img { 
    width: 100%; 
    display: block;  
    position: relative; 
} 

Ecco un jsFiddle che mostra il comportamento richiesto.

Answer 2

è sempre possibile impostare la larghezza div in questo modo:

$('#div1').css("width", $('#div1').height()/6); 

EDIT:

o si potrebbe usare qualcosa di simile:

/* Firefox */ 
width: -moz-calc(100%/6); 
/* WebKit */ 
width: -webkit-calc(100%/6); 
/* Opera */ 
width: -o-calc(100%/6); 
/* Standard */ 
width: calc(100%/6); 

Questo è solo un esempio - .. Ma è impossibile ottenere l'altezza di un div in pixel nel file css .. è necessario utilizzare jquery per quello

EDI T:

altezza 1/6 di larghezza

$('#div1').css("height", window.width()/6); 

Answer 3

si potrebbe usare jQuery, ad esempio, $('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width()/6);

spostato il secondo suggerimento del commento per leggibilità

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);}); 

Answer 4

È inoltre possibile utilizzare la soluzione descritta in Responsive square columns.

Si basa sul fatto che% padding-top/bottom e margin-top/bottom sono calcolati in base al whidth dell'elemento padre.

adattato alla vostra situazione sarebbe simile a questa:

FIDDLE

HTML:

<div class="wrap"> 
    <div class="content"> 
    </div> 
</div> 

CSS:

.wrap{ 
    position:fixed; 
    width:100%; 
    padding-bottom:16.666%; /* 100x1/6 = 16.666...*/ 
} 
.content{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}