Larghezza impostata in base all'altezza

Ho visto la soluzione per l'altezza in base alla larghezza: css height same as width. O qui: https://stackoverflow.com/a/6615994/2256981. Ma la mia domanda è opposta.Larghezza impostata in base all'altezza

mio elemento:

<body> 
    <div id="square"></div> 
</body>

Stile per esso:

body, html { 
    margin: 0; 
    height: 100%; 
    min-height: 300px; 
    position: relative; 
} 
div#square { /* My square. */ 
    height: 75%; /* It's height depends on ancestor's height. */ 
    width: 75vh; /* If supported, preliminarily sets it's width. */ 
    position: absolute; /* Centers it. */ 
    left: 50%; top: 50%; transform: translate(-50%, -50%); 
    background-color: darkorange; /* Makes it visible. */ 
}

Scrittura, che lo tiene piazza:

window.onload = window.onresize = function (event) { 
    var mySquare = document.getElementById("square"); 
    mySquare.style.width = mySquare.offsetHeight + 'px'; 
};

completo del codice qui: http://jsfiddle.net/je1h/hxkgfr9g/

La domandaè fare la stessa cosa in puro CSS. Nessuno script.

fonte

2015-04-16 jevgenij

Non so se è possibile farlo in CSS. Potresti provare https://css-tricks.com/snippets/css/a-guide-to-flexbox/, ma non so se questo ti aiuterà. – xdhmoore

Fa questo ciò che stai cercando? http://stackoverflow.com/questions/12899031/css-squares-on-resize – xdhmoore

Penso anche che non sia possibile in puro CSS, provato molte volte ... Dovremo aspettare prima di disegnare quadrati dinamici perfetti! L'unica opzione che vedo è Javascript come hai scritto tu in realtà. – Sebastien

Ci sono due techiques sono a conoscenza di mantenere il rapporto di aspetto di un elemento in base ad esso è altezza:

Quando altezza è relativa alla viewport:

È possibile utilizzare le unità VH:

div { 
 
    width: 75vh; 
 
    height: 75vh; 
 
    background:darkorange; 
 
}

<div></div>

Per un'altezza in base all'altezza di un elemento padre:

è possibile utilizzare un manichino che ha il rapporto di aspetto che si desidera. Esempio con un rapporto 1: 1 aspetto è possibile utilizzare un'immagine .png trasparente 1 * 1 o come commentato da un @vlgalik 1 * 1 base64 GIF codifica:

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#wrap{ 
 
    height:75%; 
 
} 
 
#el{ 
 
    display:inline-block; 
 
    height:100%; 
 
    background:darkorange; 
 
} 
 
#el img{ 
 
    display:block; 
 
    height:100%; 
 
    width:auto; 
 
}

<div id="wrap"> 
 
    <div id="el"> 
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
 
    </div> 
 
</div>

noti che questo l'ultima demo non si aggiorna al ridimensionamento della finestra. Ma il rapporto di aspetto viene mantenuto al caricamento della pagina

UPDATE:
come riportato al the comments impostazione display:inline-flex: su #el sembra risolvere l'aggiornamento sul problema della finestra di ridimensionamento.

fonte

2015-04-16 14:47:00

Oppure puoi usare Base64 Encoded 1x1px trasparente GIF o SVG in linea (ma ci sono alcuni problemi in FF e nei vecchi browser con SVG). – vlgalik

@vlgalik carino, ho aggiornato la risposta. –

Grazie per la risposta. È un trucco divertente, e ad essere onesti, non sono riuscito a capire come funziona :) Perché abbiamo bisogno di "#wrap", per essere precisi. E come hai fatto, purtroppo non aggiorna la larghezza di "#el" sul ridimensionamento della finestra. – jevgenij

Edit:. Perse che si voleva impostare la larghezza a seconda dell'altezza, questo non le percentuali opposte :(

Per sostenere tutti i rapporti è possibile utilizzare padding-bottom in padding-bottom sono sempre rispetto alla larghezza dell'elemento:

/* the wrapper has a width */ 
 
.wrapper { 
 
    position: relative; 
 
    width: 25%; 
 
    margin-bottom: 10px; 
 
} 
 
/* these elements set the height (using padding-bottom) */ 
 
.square { 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
} 
 
.widescreen { 
 
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */ 
 
} 
 

 
/* 
 
* This is the content. 
 
* Needs position:absolute to not add to the width of the parent 
 
*/ 
 
.content { 
 
    /* fill parent */ 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    
 
    /* visual */ 
 
    padding: 10px; 
 
    background: orange; 
 
    color: white; 
 
}

<div class="wrapper"> 
 
    <div class="square"> 
 
    <div class="content">square</div> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="widescreen"> 
 
    <div class="content">16:9 ratio</div> 
 
    </div> 
 
</div>

L'unico svantaggio è che hai bisogno di un mucchio di elementi wrapper.

fonte

2015-04-16 15:05:03 darthmaim

Stiamo trovando per la larghezza in base all'altezza non l'altezza in base alla larghezza. – JulianSoto

Larghezza impostata in base all'altezza

risposta

Problemi correlati