Mantenere le proporzioni di un div con i CSS
https://stackoverflow.com/questions/1495407
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Voglio creare un div che può cambiare la sua larghezza / altezza cambia larghezza della finestra.
Ci sono delle regole CSS3 che permetterebbero l'altezza di cambiare a seconda della larghezza, mantenendo le proporzioni
So che posso fare questo tramite JavaScript, ma io preferirei utilizzando solo i CSS.
Soluzione
Basta creare un <div> involucro con un valore percentuale per padding-bottom, in questo modo:
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}<div></div>
Il risultato sarà un <div> con altezza pari al 75% della larghezza del suo contenitore. (4: 3 aspect ratio)
Questo si basa sul fatto che, per padding:
La percentuale è calcolata rispetto alla Larghezza del blocco contenitore del riquadrato generato [...] (fonte: w3.org , sottolineatura mia)
I valori di padding-bottom degli proporzioni e larghezza 100%:
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
contenuti Posizionamento nel div:
Al fine di mantenere il rapporto di aspetto del div e prevenire il suo contenuto da stretching, è necessario aggiungere un figlio posizionato in modo assoluto e si estendono ai bordi della confezione con:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Ecco un demo e un altro più in profondità demo
Altri suggerimenti
vw:
È possibile utilizzare le unità vw sia per il larghezza e altezza dell'elemento. Questo permette proporzioni dell'elemento da conservare, in base alla larghezza della finestra.
vw: 1 / 100esimo della larghezza della finestra. [ MDN ]
In alternativa, è possibile anche utilizzare vh in altezza finestra, o anche vmin / vmax utilizzare minore / maggiore delle dimensioni delle viste (discussione qui ).
Esempio: 1: 1 rapporto di aspetto
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>
Per altre proporzioni, è possibile utilizzare la seguente tabella per calcolare il valore di altezza secondo la larghezza dell'elemento:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
Esempio: 4x4 griglia di div quadrati
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
width: 23vw;
height: 23vw;
margin: 0.5vw auto;
background: gold;
}<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
Ecco un Fiddle con questa demo e qui è una soluzione per fare un griglia reattivo di quadrati con contenuto verticalmente e orizzontalmente centrata .
Browser supportati per vh / unità VW sta IE9 + vedere canIuse per ulteriori informazioni
Ho trovato un modo per fare questo usando i CSS, ma bisogna stare attenti a come si può cambiare a seconda del flusso del tuo sito web. L'ho fatto al fine di incorporare il video con un rapporto d'aspetto costante all'interno di una porzione di larghezza fluida del mio sito web.
Diciamo che avete un video incorporato in questo modo:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
È quindi possibile inserire tutto questo all'interno di un div con una classe "video". Questa classe video sarà probabilmente l'elemento fluido nel tuo sito web in modo tale che, di per sé, non ha vincoli di altezza diretti, ma quando si ridimensiona il browser cambierà in larghezza in base al flusso del sito web. Questo sarebbe l'elemento che si sta probabilmente cercando di ottenere il vostro video incorporato in pur mantenendo un certo rapporto di aspetto del video.
Per fare questo, ho messo un'immagine prima che l'oggetto incorporato all'interno del "video" div class.
!!! La parte importante è che l'immagine ha le proporzioni corrette che si desidera mantenere. Inoltre, assicurarsi che la dimensione dell'immagine è almeno altrettanto grande come il più piccolo che ci si aspetta il video (o qualsiasi altra cosa si sta mantenendo l'A.R. di) per ottenere, sulla base di layout. Ciò eviterà eventuali problemi nella risoluzione dell'immagine quando è percentuale ridimensionata. Ad esempio, se si voleva mantenere un aspect ratio di 3: 2, non basta usare un 3px per immagine 2px. Può funzionare in alcune circostanze, ma non l'ho provato, e probabilmente sarebbe una buona idea per evitare.
Si dovrebbe probabilmente già avere una larghezza minima del genere definito per elementi fluidi del tuo sito web. In caso contrario, è una buona idea di farlo al fine di evitare gli elementi tagliando o avere sovrapposizione quando la finestra del browser diventa troppo piccolo. E 'meglio avere una barra di scorrimento a un certo punto. Il più piccolo in larghezza di una pagina web dovrebbe ottenere è da qualche parte intorno ~ 600px (compresi eventuali colonne di dimensione fissa) perché le risoluzioni dello schermo non vengono più piccoli a meno che non avete a che fare con i siti di telefonia-friendly. !!!
Io uso un png completamente trasparente, ma io in realtà non credo che finisce importando se lo fai bene. In questo modo:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Ora si dovrebbe essere in grado di aggiungere CSS simile al seguente:
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
Assicurati di rimuovere anche qualsiasi altezza esplicita o dichiarazione di larghezza all'interno dei tag object e embed che di solito vengono con copia il codice embed / incollato.
Il modo in cui funziona dipende dalle proprietà posizione dell'elemento di classe il video e la voce che si desidera avere mantenere un certo rapporto di aspetto. Sfrutta il modo in cui un'immagine manterrà il suo formato appropriato quando ridimensionata in un elemento. Racconta quant'altro è in video elemento di classe di prendere pieno vantaggio del patrimonio immobiliare fornito dal immagine dinamica forzando la sua larghezza / altezza al 100% dell'elemento classe video viene regolato con l'immagine.
Abbastanza freddo, eh?
Potrebbe essere necessario giocare con un po 'per farlo funzionare con il tuo design, ma questo in realtà funziona sorprendentemente bene per me. Il concetto generale è lì.
Per aggiungere alla risposta di Web_Designer, il <div> avrà un'altezza (interamente costituito padding inferiore) del 75% della larghezza di esso è elemento contenente . Ecco una buona sintesi: http://mattsnider.com/css-using-percent-for- margin-e-padding / . Io non sono sicuro perché questo dovrebbe essere così, ma è così che è.
Se si desidera che il div di essere una larghezza diverso da 100%, è necessario un altro div avvolgimento su cui impostare la larghezza:
div.ar-outer{
width: 60%; /* container; whatever width you want */
margin: 0 auto; /* centered if you like */
}
div.ar {
width:100%; /* 100% of width of container */
padding-bottom: 75%; /* 75% of width of container */
position:relative;
}
div.ar-inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Ho usato qualcosa di simile a trucco immagine di Elliot di recente per permettere a me di utilizzare le query multimediali CSS per servire un file del logo diverso a seconda risoluzione del dispositivo, ma ancora Adattare proporzionalmente come <img> sarebbe naturalmente fare (ho impostato il logo immagine di sfondo come .png trasparente con le proporzioni corrette). Ma la soluzione di Web_Designer mi farebbe risparmiare una richiesta HTTP.
Elliot mi ha spinto a questa soluzione - grazie:
aspectratio.png è un PNG file completamente trasparente con la dimensione del vostro preferito aspetto-ratio, nel mio caso 30x10 pixel.
HTML
<div class="eyecatcher">
<img src="/img/aspectratio.png"/>
</div>
CSS3
.eyecatcher img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
Attenzione: è una background-size css3 di funzionalità che potrebbero non funzionare con il vostro target-browser. Check interoperabilità (f.e. su caniuse.com ).
Come indicato nel qui w3schools.com e un po 'ha ribadito in questo risposta accettata , valori padding come percentuali (sottolineatura mia):
Specifica l'imbottitura in percentuale della larghezza della elemento contenente
Ergo, un esempio corretto di un DIV reattivo che mantiene un rapporto di 16: 9 è il seguente:
CSS
.parent {
position: relative;
width: 100%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
HTML
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
basiamo sulla vostra soluzioni che ho fatto un po 'di trucco:
Quando lo si utilizza, il codice HTML sarà solo
<div data-keep-ratio="75%">
<div>Main content</div>
</div>
Per usare questo modo marca: CSS:
*[data-keep-ratio] {
display: block;
width: 100%;
position: relative;
}
*[data-keep-ratio] > * {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
e js (jQuery)
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
E avendo questo è sufficiente impostare data-keep-ratio attr ad altezza / larghezza e questo è tutto.
È possibile utilizzare uno svg. Rendere la posizione del contenitore / involucro relativa, inserire il primo SVG posizionato come staticly e poi mettere contenuti posizionamento assoluto (top: 0; sinistra: 0; destra: 0; inferiore: 0;)
Esempio con proporzioni 16: 9:
image.svg: (può essere inline in src)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>
CSS:
.container {
position: relative;
}
.content {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
HTML:
<div class="container">
<img style="width: 100%" src="image.svg" />
<div class="content"></div>
</div>
Si noti che svg linea non sembra funzionare, ma è possibile URLEncode SVG e incorporarlo in img src attributo in questo modo:
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
Come @ web-tiki mostrano già un modo per utilizzare vh / vw, ho anche bisogno di un modo per centrare nello schermo, ecco un frammento di codice per 09:16 ritratto.
.container {
width: 100vw;
height: calc(100vw * 16 / 9);
transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}
translateY manterrà questo centro nella schermata. calc(100vw * 16 / 9) si prevede di altezza per 9 / 16.(100vw * 16 / 9 - 100vh) è l'altezza di troppo pieno, quindi, tirare su overflow height/2 la conserverà centro sullo schermo.
per il paesaggio, e mantenere 16: 9 , si mostra l'uso
.container {
width: 100vw;
height: calc(100vw * 9 / 16);
transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}
Il rapporto di 9/16 è la facilità di cambiare, non c'è bisogno di 100:56.25 predefinito o 100:75.If si vuole garantire l'altezza prima, si dovrebbe passare larghezza e l'altezza, per esempio height:100vh;width: calc(100vh * 9 / 16) per 09:16 ritratto.
Se si desidera adattato per dimensioni dello schermo, è possibile anche interessi
- background-size copertura / contenere
- sopra stile è simile a contenere, dipende larghezza:. Rapporto di altezza
- oggetto-fit
- copertura / contenere per img tag / video
-
@media (orientation: portrait)/@media (orientation: landscape)- media query per
portrait/landscapeper modificare il rapporto.
- media query per
Si tratta di un miglioramento rispetto alla risposta accettata:
- Utilizza elementi pseudo invece di div involucro
- Il rapporto di aspetto è basata sulla larghezza della scatola, invece del suo genitore
- La scatola allungare verticalmente quando il contenuto diventa più alto
.box {
margin-top: 1em;
margin-bottom: 1em;
background-color: #CCC;
}
.fixed-ar::before {
content: "";
float: left;
width: 1px;
margin-left: -1px;
}
.fixed-ar::after {
content: "";
display: table;
clear: both;
}
.fixed-ar-16-9::before {
padding-top: 56.25%;
}
.fixed-ar-3-2::before {
padding-top: 66.66%;
}
.fixed-ar-4-3::before {
padding-top: 75%;
}
.fixed-ar-1-1::before {
padding-top: 100%;
}
.width-50 {
display: inline-block;
width: 50%;
}
.width-20 {
display: inline-block;
width: 20%;
}<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
SCSS è la migliore soluzione nel mio caso; utilizzando un attributo di dati:
[data-aspect-ratio] {
display: block;
max-width: 100%;
position: relative;
&:before {
content: '';
display: block;
}
> * {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
[data-aspect-ratio="3:1"]:before {
padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
padding-top: 300%;
}
Ad esempio:
<div data-aspect-ratio="16:9"><iframe ...></iframe></div>
Solo un'idea o di un hack.
div {
background-color: blue;
width: 10%;
transition: background-color 0.5s, width 0.5s;
font-size: 0;
}
div:hover {
width: 20%;
background-color: red;
}
img {
width: 100%;
height: auto;
visibility: hidden;
}<div>
<!-- use an image with target aspect ratio. sample is a square -->
<img src="http://i.imgur.com/9OPnZNk.png" />
</div>
Diciamo che avere 2 div div outher è un contenitore e l'interno potrebbe essere qualsiasi elemento che è necessario mantenere il suo rapporto (img o un iframe YouTube o qualsiasi altra cosa)
html assomiglia a questo:
<div class='container'>
<div class='element'>
</div><!-- end of element -->
Diciamo che è necessario mantenere il rapporto tra il "elemento"
ratio => 4 a 1 o 2 a 1 ...
css assomiglia a questo
.container{
position: relative;
height: 0
padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/
}
.element{
width : 100%;
height: 100%;
position: absolute;
top : 0 ;
bottom : 0 ;
background : red; /* just for illustration */
}
imbottitura quando specificato in% viene calcolata sulla base non larghezza altezza. .. Quindi sostanzialmente si non importa quale sarà sempre calcolato la larghezza che altezza base di questo. che manterrà il rapporto.
Mentre la maggior parte delle risposte sono molto cool, la maggior parte di loro richiedono di avere un'immagine già dimensionato correttamente ... Altre soluzioni funzionano solo per una larghezza e non si preoccupano del altezza disponibile, ma a volte si vuole adattare il contenuto di una certa altezza anche.
Ho cercato di coppia insieme per portare una soluzione completamente portatile e ri-considerevole ... Il trucco è quello di utilizzare per il ridimensionamento automatico di un'immagine, ma utilizzare un elemento inline svg invece di utilizzare un'immagine pre-fusi o qualsiasi forma di seconda richiesta HTTP ...
div.holder{
background-color:red;
display:inline-block;
height:100px;
width:400px;
}
svg, img{
background-color:blue;
display:block;
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.content_sizer{
position:relative;
display:inline-block;
height:100%;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(155,255,0,0.5);
}<div class="holder">
<div class="content_sizer">
<svg width=10000 height=5000 />
<div class="content">
</div>
</div>
</div>
Si noti che ho usato grandi valori della larghezza e attributi altezza della SVG, in quanto deve essere maggiore della dimensione massima prevista come può ridursi soltanto. L'esempio fa il rapporto del div 10: 5
Se si vuole adattare un quadrato all'interno della finestra in verticale o orizzontale (il più grande possibile, ma niente di attaccare al di fuori), passare tra l'utilizzo vw / vh sull'orientamento portrait / landscape:
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
mi sono imbattuto su una soluzione intelligente utilizzando <svg> e display:grid.
elemento griglia permette di occupare lo stesso spazio con due (o più) elementi, senza bisogno di specificare quale imposta l'altezza. Il che significa che, fuori dalla scatola, uno il più alto imposta il rapporto .
Questo significa che è possibile utilizzarlo come è quando si sa che il contenuto non sarà mai abbastanza alto per riempire l'intera "ratio" e si sta semplicemente cercando un modo per posizionare il contenuto in questo spazio (cioè al centro su entrambe le direzioni usano
display:flex; align-items:center; justify-content:center).
E 'più o meno lo stesso di utilizzare un <img> trasparente con display:block e il rapporto predeterminato, ad eccezione del <svg> è più leggero e molto più facile da modificare (per modificare il rapporto in risposta, se avete bisogno di).
<div class="ratio">
<svg viewBox="0 0 1 1"></svg>
<div>
I'm square
</div>
</div>
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
Tutto quello che dovete fare è cambiare il rapporto <svg>s:
-
<svg viewBox="0 0 4 3"></svg> -
<svg viewBox="0 0 16 9"></svg>
vederlo lavorare:
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
/* below code NOT needed for setting the ratio
* I just wanted to mark it visually
* and center contents
*/
.ratio div {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
Fixed ratio 7:1
</div>
</div>
Se avete bisogno di una soluzione in cui l'elemento di contenuto non è permesso di impostare il rapporto quando è più alto (con troppopieno nascosto o automatico), è necessario impostare position:relative sulla griglia e position:absolute; height:100%; overflow-y: auto; sul contenuto. Esempio:
.ratio {
display: grid;
position: relative;
}
.ratio > * {
grid-area: 1/1/1/1;
}
.ratio > div {
height: 100%;
overflow-y: auto;
position: absolute;
/* the rest is not needed */
border: 1px solid red;
padding: 0 1rem;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.
<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.
<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
</div>
</div>
Mi piacerebbe condividere la mia soluzione, dove ho un img-tag riempire un certo rapporto di aspetto. Non ho potuto usare background a causa della mancanza di sostegno del CMS e io non preferisco usare un tag di stile in questo modo: <img style="background:url(...)" />. Inoltre, la larghezza è 100%, quindi non ha bisogno di essere fissato a una dimensione fissa come in alcune delle soluzioni. Sarà scala responsabilmente!
.wrapper {
width: 50%;
}
.image-container {
position: relative;
width: 100%;
}
.image-container::before {
content: "";
display: block;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ratio-4-3::before {
padding-top: 75%;
}
.ratio-3-1::before {
padding-top: calc(100% / 3);
}
.ratio-2-1::before {
padding-top: 50%;
}<div class="wrapper"> <!-- Just to make things a bit smaller -->
<p>
Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
</p>
<div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
<img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
</div>
<p>
Just place other block elements around it; it will work just fine.
</p>
</div>
Ho eseguito in questo problema abbastanza alcune volte, così ho fatto una soluzione di JS per esso. Questo fondamentalmente regolare l'altezza del DOMElement secondo la larghezza dell'elemento per il rapporto specificato. Si potrebbe utilizzare come seguito:
<div ratio="4x3"></div>
Si prega di notare che dal momento che è l'impostazione l'altezza dell'elemento, l'elemento dovrebbe essere un display:block o display:inline-block.
Di 'che di mantenere Larghezza: 100px e Altezza: 50px (cioè, 2: 1) Basta fare questo per la matematica:
.pb-2to1 {
padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
È possibile utilizzare il layout di flusso (FWD).
https://en.wikipedia.org/wiki/Adaptive_web_design
Si scalerà e mantenere il layout, è un po 'complessa, ma consente per una pagina per ridimensionare senza spingere il contenuto simile (RWD).
Sembra che reattivo, ma è scalare. https://www.youtube.com/watch?v=xRcBMLI4jbg
È possibile trovare la formula di scala CSS qui:
Ho usato una nuova soluzione.
.squares{
width: 30vw
height: 30vw
Per rapporto di aspetto principale
.aspect-ratio
width: 10vw
height: 10vh
Tuttavia, questo è relativo a tutta la finestra. Quindi, se avete bisogno di un div che è il 30% della larghezza finestra, è possibile utilizzare 30vw invece, e dal momento che si conosce la larghezza, si riutilizzarli in altezza utilizzando calc e VW unità.
Se l'intera struttura del contenitore è stata basata percentuale, questo sarebbe il comportamento di default, si può fornire un esempio più specifico?
Di seguito è riportato un esempio di quello che voglio dire, se la vostra gerarchia padre intera si è basata%, qualsiasi aggiustamento finestra del browser dovrebbe funzionare senza ulteriori js / css, è questo non una possibilità con il layout?
<div style="width: 100%;">
<div style="width: 50%; margin: 0 auto;">Content</div>
</div>
