Voglio creare un divche può cambiare la sua larghezza / altezza man mano che cambia la larghezza della finestra.

Esistono regole CSS3 che consentirebbero di modificare l'altezza in base alla larghezza, pur mantenendo le proporzioni ?

So che posso farlo tramite JavaScript, ma preferirei usare solo CSS.

Basta creare un wrapper <div>con un valore percentuale per padding-bottom, in questo modo:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

/* demonstration purposed only : non-essential */
.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

<div class="demoWrapper">
  <div></div>
</div>

Ne risulterà <div>un'altezza pari al 75% della larghezza del suo contenitore (un rapporto di aspetto 4: 3).

Ciò si basa sul fatto che per l'imbottitura:

La percentuale viene calcolata rispetto alla larghezza del blocco contenente la casella generata [...] (fonte: w3.org , enfasi mia)

Valori di riempimento inferiore per altri rapporti d'aspetto e larghezza del 100%:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Posizionamento del contenuto nel div:

Al fine di mantenere le proporzioni del div e impedire che il suo contenuto si estenda, è necessario aggiungere un bambino assolutamente posizionato e allungarlo ai bordi dell'involucro con:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

Ecco una demo e un altro più in profondità demo

vw unità:

Puoi usare le vwunità sia per la larghezza che per l'altezza dell'elemento. Ciò consente di preservare le proporzioni dell'elemento, in base alla larghezza della finestra.

vw: 1/100 della larghezza della finestra. [ MDN ]

In alternativa, è possibile utilizzare anche vhper l'altezza della finestra o anche vmin/ vmaxper utilizzare le dimensioni minore / maggiore della finestra (discussione qui ).

Esempio: proporzioni 1: 1

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

Per altri rapporti di formato, è possibile utilizzare la tabella seguente per calcolare il valore per l'altezza in base alla larghezza dell'elemento:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Esempio: griglia 4x4 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 violino con questa demo ed ecco una soluzione per creare una griglia reattiva di quadrati con contenuto centrato verticalmente e orizzontalmente .

Il supporto del browser per le unità vh / vw è IE9 + vedi canIuse per maggiori informazioni

Ho trovato un modo per farlo usando i CSS, ma devi stare attento perché potrebbe cambiare a seconda del flusso del tuo sito web. L'ho fatto per incorporare video con proporzioni costanti all'interno di una porzione di larghezza fluida del mio sito web.

Supponi di avere un video incorporato come questo:

<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 abbia vincoli di altezza diretti, ma quando ridimensioni il browser cambierà in larghezza in base al flusso del sito web. Questo sarebbe l'elemento che probabilmente stai cercando di ottenere il tuo video incorporato mantenendo un certo rapporto di aspetto del video.

Per fare ciò, ho inserito un'immagine prima dell'oggetto incorporato all'interno della classe div "video".

!!! La parte importante è che l'immagine ha le proporzioni corrette che desideri mantenere. Inoltre, assicurati che la dimensione dell'immagine sia ALMENO grande quanto la più piccola che ti aspetti che il video (o qualunque cosa tu stia mantenendo l'AR) sia basata sul layout. Ciò eviterà qualsiasi potenziale problema nella risoluzione dell'immagine quando viene ridimensionata in percentuale. Ad esempio, se si desidera mantenere un rapporto di formato di 3: 2, non utilizzare solo un'immagine 3px per 2px. Potrebbe funzionare in alcune circostanze, ma non l'ho testato e probabilmente sarebbe una buona idea evitare.

Probabilmente dovresti già avere una larghezza minima come questa definita per gli elementi fluidi del tuo sito web. Altrimenti, è una buona idea farlo al fine di evitare di tagliare elementi o di sovrapporsi quando la finestra del browser diventa troppo piccola. È meglio avere una barra di scorrimento ad un certo punto. La larghezza minima che una pagina Web dovrebbe ottenere è di circa 600px (comprese eventuali colonne a larghezza fissa) perché le risoluzioni dello schermo non diminuiscono a meno che non si tratti di siti adatti al telefono. !!!

Uso un png completamente trasparente ma non credo davvero che finisca per importare se lo fai nel modo giusto. Come questo:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Ora dovresti essere in grado di aggiungere CSS simili ai seguenti:

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 anche di rimuovere qualsiasi dichiarazione esplicita di altezza o larghezza all'interno dell'oggetto e di incorporare i tag che di solito vengono forniti con il codice di incorporamento copia / incolla.

Il modo in cui funziona dipende dalle proprietà di posizione dell'elemento della classe video e l'elemento desiderato deve mantenere un determinato formato. Sfrutta il modo in cui un'immagine manterrà le proporzioni corrette quando viene ridimensionata in un elemento. Indica a tutti gli altri elementi della classe video di sfruttare appieno il patrimonio immobiliare fornito dall'immagine dinamica forzando la sua larghezza / altezza al 100% dell'elemento della classe video che viene regolato dall'immagine.

Abbastanza bello, eh?

Potrebbe essere necessario giocarci un po 'per farlo funzionare con il tuo design, ma in realtà funziona sorprendentemente bene per me. Il concetto generale è lì.

Elliot mi ha ispirato a questa soluzione - grazie:

aspectratio.png è un file PNG completamente trasparente con le dimensioni del tuo formato preferito, 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);
}

Nota: background-size è una funzione css3 che potrebbe non funzionare con i browser di destinazione. È possibile verificare l'interoperabilità (ad esempio su caniuse.com ).

Per aggiungere alla risposta di Web_Designer, l' <div>altezza (interamente costituita dall'imbottitura inferiore) sarà del 75% della larghezza del suo elemento contenente . Ecco un buon riassunto: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Non sono sicuro del motivo per cui dovrebbe essere così, ma è così.

Se vuoi che il tuo div sia una larghezza diversa dal 100%, hai bisogno di un altro div avvolgente 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;
}

Di recente ho usato qualcosa di simile al trucco dell'immagine di Elliot per consentirmi di utilizzare query multimediali CSS per servire un file logo diverso a seconda della risoluzione del dispositivo, ma comunque ridimensionare proporzionalmente come <img>farebbe naturalmente (ho impostato il logo come immagine di sfondo su un .png trasparente con le proporzioni corrette). Ma la soluzione di Web_Designer mi farebbe risparmiare una richiesta http.

Come indicato qui su w3schools.com e in qualche modo ripetuto in questa risposta accettata , inserendo i valori in percentuale (sottolineatura mia):

Specifica il riempimento in percentuale della larghezza dell'elemento contenitore

Ergo, un esempio corretto di un DIV reattivo che mantiene le proporzioni 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>

Demo su JSFiddle

Dato che @ web-tiki mostra già un modo di usare vh/ vw, ho anche bisogno di un modo per centrare lo schermo, ecco un codice snippet per il ritratto 9:16 .

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateYmanterrà questo centro sullo schermo. calc(100vw * 16 / 9)è prevista altezza per 9/16. (100vw * 16 / 9 - 100vh)è un'altezza di troppo pieno, quindi, tirare su overflow height/2lo manterrà al centro sullo schermo.

Per il paesaggio e mantieni 16: 9 , mostri l'uso

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

Il rapporto 9/16 è facile da modificare, non è necessario il valore predefinito 100:56.25o 100:75. Se si desidera garantire prima l'altezza, è necessario cambiare larghezza e altezza, ad esempio height:100vh;width: calc(100vh * 9 / 16)per il ritratto 9:16.

Se desideri adattarti a dimensioni dello schermo diverse, potresti anche interessarti

• copertina di dimensioni dello sfondo / contenere
  • Lo stile sopra è simile a contenere, dipende dalla larghezza: rapporto altezza.
• oggetto-fit
  • copertina / contiene per tag img / video
• @media (orientation: portrait)/@media (orientation: landscape)
  • Media query per portrait/ landscapeper modificare il rapporto.

Questo è un miglioramento sulla risposta accettata:

• Utilizza pseudo elementi invece di div wrapper
• Le proporzioni si basano sulla larghezza della casella anziché sul suo genitore
• La casella si allungherà 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>

Mi sono imbattuto in una soluzione intelligente usando <svg>e display:grid.

Grid element consente di occupare lo stesso spazio con due (o più) elementi, senza la necessità di specificare quale imposta l'altezza. Ciò significa che, fuori dalla scatola, quello più alto stabilisce il rapporto .

Ciò significa che puoi usarlo così com'è quando sai che il contenuto non sarà mai abbastanza alto da riempire l'intero "rapporto" e stai semplicemente cercando un modo per posizionare il contenuto in questo spazio (cioè centrarlo su entrambe le direzioni display:flex; align-items:center; justify-content:center).
E 'praticamente la stessa come con un trasparente <img>con display:blocke il rapporto predeterminato, ad eccezione del <svg>più leggero e molto più facile da modificare (per modificare il rapporto in risposta, nel caso fosse necessario).

<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 devi fare è cambiare il <svg>rapporto s:

• <svg viewBox="0 0 4 3"></svg>
• <svg viewBox="0 0 16 9"></svg>

Guardalo funzionare:

.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 è necessaria una soluzione in cui l'elemento di contenuto non è autorizzato a impostare il rapporto quando è più alto (con overflow nascosto o automatico), è necessario impostare position:relativesulla 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>

Sulla base delle tue soluzioni ho fatto qualche trucco:

Quando lo usi, il tuo HTML sarà solo

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

Per usarlo in questo modo crea: 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 hai appena impostato attr data-keep-ratiosu altezza / larghezza e il gioco è fatto.

Puoi usare uno svg. Rendi relativa la posizione del contenitore / wrapper, metti prima lo svg come posizionato staticamente e poi inserisci il contenuto assolutamente posizionato (in alto: 0; a sinistra: 0; a destra: 0; in basso: 0;)

Esempio con proporzioni 16: 9:

image.svg: (può essere integrato 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>

Nota che svg inline non sembra funzionare, ma puoi urlencode lo svg e incorporarlo nell'attributo img src 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%;" />

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%;
}

Per esempio :

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

fonte

Sebbene la maggior parte delle risposte sia molto interessante, la maggior parte di esse richiede un'immagine già dimensionata correttamente ... Altre soluzioni funzionano solo per una larghezza e non si occupano dell'altezza disponibile, ma a volte si desidera adattare il contenuto anche a una certa altezza .

Ho provato ad accoppiarli insieme per portare una soluzione completamente portatile e ridimensionabile ... Il trucco è usare il ridimensionamento automatico di un'immagine ma usare un elemento svg in linea invece di usare un'immagine pre-renderizzata 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 negli attributi larghezza e altezza dell'SVG, poiché deve essere più grande della dimensione massima prevista in quanto può solo ridursi. L'esempio rende il rapporto del div 10: 5

Solo un'idea o un trucco.

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>

supponiamo che tu abbia 2 div il div esterno è un contenitore e l'interno potrebbe essere qualsiasi elemento di cui hai bisogno per mantenere il suo rapporto (img o un iframe di YouTube o altro)

html è simile al seguente:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

diciamo che è necessario mantenere il rapporto dell '"elemento"

rapporto => 4 a 1 o 2 a 1 ...

css si presenta così

.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 se specificato in% viene calcolato in base alla larghezza e non all'altezza. .. quindi praticamente non importa quale sia la tua larghezza, l'altezza sarà sempre calcolata in base a quello. che manterrà il rapporto.

Ho riscontrato questo problema alcune volte, quindi ho creato una soluzione JS per questo. Questo regola sostanzialmente l'altezza di domElement in base alla larghezza dell'elemento in base al rapporto specificato. Puoi usarlo come segue:

<div ratio="4x3"></div>

Tieni presente che, poiché sta impostando l'altezza dell'elemento, l'elemento dovrebbe essere a display:blocko display:inline-block.

https://github.com/JeffreyArts/html-ratio-component

Se vuoi adattare un quadrato all'interno del viewport sia in verticale che in orizzontale (il più grande possibile, ma nulla si attacca all'esterno), passa dall'uso vw/ vhall'orientamento portrait/ landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

Vorrei condividere la mia soluzione, dove ho un imgtag che riempie un certo formato. Non ho potuto utilizzare backgrounda 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 è del 100%, quindi non è necessario impostare una dimensione fissa come in alcune soluzioni. Si ridimensionerà in modo reattivo!

.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>

Puoi farlo usando SVG.

Dipende da un caso, ma in alcuni è davvero utile. Ad esempio, puoi impostare background-imagesenza impostare l'altezza fissa o utilizzarlo per incorporare YouTube <iframe>con rapporto 16:9eposition:absolute ecc.

Per 3:2set di rapportiviewBox="0 0 3 2" e così via.

Esempio:

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

Un modo semplice per mantenere le proporzioni, usando l'elemento canvas.

Prova a ridimensionare il div in basso per vederlo in azione.

Per me, questo approccio ha funzionato meglio, quindi lo condivido con gli altri in modo che possano trarne vantaggio.

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

Funziona anche con altezza dinamica!

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

Dì che ti piace mantenere la Larghezza: 100 px e l'Altezza: 50 px (cioè 2: 1) Basta fare questo calcolo:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}

Bene, abbiamo recentemente ricevuto la possibilità di utilizzare la aspect-ratioproprietà in CSS.

https://twitter.com/Una/status/1260980901934137345/photo/1

Nota: il supporto non è ancora il migliore ...

https://caniuse.com/#search=aspect-ratio

È possibile utilizzare il layout del flusso (FWD).

https://en.wikipedia.org/wiki/Adaptive_web_design

Ridimensionerà e manterrà il layout, è un po 'complesso ma consente di ridimensionare una pagina senza spingere il contenuto come (RWD).

Sembra reattivo ma è ridimensionamento. https://www.youtube.com/watch?v=xRcBMLI4jbg

Puoi trovare la formula di ridimensionamento CSS qui:

http://plugnedit.com/pnew/928-2/

Ho usato una nuova soluzione.

.squares{
  width: 30vw
  height: 30vw

Alle proporzioni principali

.aspect-ratio
  width: 10vw
  height: 10vh

Tuttavia, questo è relativo all'intero viewport. Quindi, se hai bisogno di un div pari al 30% della larghezza del viewport, puoi invece usare 30vw e, poiché conosci la larghezza, puoi riutilizzarli in altezza usando calc e vw unit.

Se l'intera struttura del contenitore fosse basata su percentuale, questo sarebbe il comportamento predefinito, puoi fornire un esempio più specifico?

Di seguito è riportato un esempio di ciò che intendo, se la tua intera gerarchia genitore fosse basata su%, qualsiasi regolazione della finestra del browser funzionerebbe senza ulteriori js / css, non è questa una possibilità con il tuo layout?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>