vw unidades:

Se puede utilizar vw unidades tanto para el anchura y la altura del elemento. Esto permite que la relación de aspecto del elemento se conserve, en función del ancho de la ventana.

Vw : 1/100 de la anchura de la ventana. [MDN]

Alternativamente, también puede usar vh para la altura de la ventana, o incluso vmin/vmax para utilizar la menor / mayor de las dimensiones de la ventana (discusión aquí).

Ejemplo: relación de aspecto 1: 1

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

<div></div>

Para otras relaciones de aspecto, puede usar la siguiente tabla para calcular el valor de altura de acuerdo con el ancho del elemento:

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

Ejemplo: cuadrícula 4x4 de divs cuadrados

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>

Aquí hay un Juguetea con esta demo y aquí hay una solución para hacer una cuadrícula sensible de cuadrados con verticaly y horizontaly centrado contenido.

El soporte del navegador para unidades vh/vw es IE9 + ver canIuse para más información

He encontrado una manera de hacer esto usando CSS, pero debes tener cuidado ya que puede cambiar dependiendo del flujo de tu propio sitio web. Lo he hecho con el fin de incrustar video con una relación de aspecto constante dentro de una porción de ancho fluido de mi sitio web.

Digamos que tienes un video incrustado como este:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Entonces podría colocar todo esto dentro de un div con una clase "video". Esta clase de video probablemente será el elemento fluido en su sitio web de tal manera que, por sí misma, no tiene altura directa restricciones, pero cuando cambia el tamaño del navegador cambiará de ancho de acuerdo con el flujo del sitio web. Este sería el elemento que probablemente está tratando de obtener su video incrustado mientras mantiene una cierta relación de aspecto del video.

Para hacer esto, pongo una imagen antes del objeto incrustado dentro de la clase "video" div.

!!! La parte importante es que la imagen tiene la relación de aspecto correcta que desea mantener. Además, asegúrese de que el tamaño de la imagen esté en AL menos tan grande como el más pequeño que esperas que el video (o lo que sea que mantengas el A. R. de) se base en tu diseño. Esto evitará posibles problemas en la resolución de la imagen cuando se cambie el tamaño porcentual. Por ejemplo, si desea mantener una relación de aspecto de 3:2, no solo use una imagen de 3px por 2px. Puede funcionar bajo algunas circunstancias, pero no lo he probado, y probablemente sería una buena idea evitarlo.

Probablemente ya deberías tener un ancho mínimo así definido para elementos fluidos de su sitio web. Si no, es una buena idea hacerlo para evitar cortar elementos o que se superpongan cuando la ventana del navegador se vuelve demasiado pequeña. Es mejor tener una barra de desplazamiento en algún momento. El más pequeño en ancho que una página web debe obtener es en algún lugar alrededor de ~600px (incluyendo cualquier columna de ancho fijo) porque las resoluciones de pantalla no son más pequeñas a menos que se trate de sitios amigables con el teléfono. !!!

Utilizo un png completamente transparente pero realmente no creo que termine importando si lo haces bien. Así:

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

Ahora debería poder agregar CSS similar a lo siguiente:

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

Asegúrese también de eliminar cualquier declaración explícita de altura o anchura dentro de las etiquetas de objeto e incrustación que normalmente vienen con el código de incrustación copiado/pegado.

La forma en que funciona depende de las propiedades de posición del elemento video class y el elemento que desea mantener una cierta relación de aspecto. Se aprovecha de la forma en que un la imagen mantendrá su relación de aspecto adecuada cuando se redimensione en un elemento. Le dice a cualquier otra cosa que esté en el elemento de la clase de video que aproveche al máximo los bienes raíces proporcionados por la imagen dinámica forzando su ancho/alto al 100% del elemento de la clase de video que está siendo ajustado por la imagen.

Bastante bueno, ¿eh?

Es posible que tenga que jugar un poco con él para que funcione con su propio diseño, pero esto realmente funciona sorprendentemente bien para mí. El concepto general está ahí.

Para agregar a la respuesta de Web_Designer, el <div> tendrá una altura (completamente compuesta de relleno inferior) del 75% del ancho de su que contiene el elemento. He aquí un buen resumen: http://mattsnider.com/css-using-percent-for-margin-and-padding / . No estoy seguro de por qué debería ser así, pero así es como es.

Si desea que su div sea un ancho que no sea 100%, necesita otro div de envoltura en el que establecer el ancho:

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

Usé algo similar al de Elliot truco de imagen recientemente para permitirme usar CSS media queries para servir un archivo de logotipo diferente dependiendo de la resolución del dispositivo, pero todavía escalar proporcionalmente como un <img> haría naturalmente (establecí el logotipo como imagen de fondo a un transparente .png con la relación de aspecto correcta). Pero la solución de Web_Designer me ahorraría una solicitud http.

Elliot me inspiró a esta solución-gracias:

aspectratio.png es un archivo PNG completamente transparente con el tamaño de su relación de aspecto preferida, en mi caso 30x10 píxeles.

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

Tenga en cuenta: background-size es una característica de css3 que podría no funcionar con sus navegadores de destino. Puede comprobar la interoperabilidad (p. e. on caniuse.com).

Como se indica en aquí en w3schools.com y algo reiterado en esta respuesta aceptada , valores de relleno como porcentajes (énfasis mío):

Especifica el relleno en porcentaje del ancho del elemento que contiene

Ergo, un ejemplo correcto de un DIV sensible que mantiene una relación de aspecto de 16:9 es el siguiente:

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 en JSFiddle

Basándome en sus soluciones he hecho un truco:

Cuando lo use, su HTML será solo

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

Para usarlo de esta manera hacer: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Y js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

Y teniendo esto solo se establece attr data-keep-ratio a alto/ancho y eso es todo.

Puede usar un svg. Haga que la posición del contenedor/envoltura sea relativa, coloque el svg primero como posicionado estaticamente y luego coloque el contenido posicionado absolutamente (top: 0; left:0; right:0; bottom:0;)

Ejemplo con proporciones 16:9:

Imagen.svg: (puede ser inlineado en 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>

Tenga en cuenta que el svg en línea no parece funcionar, pero puede codificar urlencode el svg e incrustarlo en el atributo img src de la siguiente manera:

<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%;" />

Como @web-tiki ya muestran una forma de usar vh/vw, También necesito una forma de centrarme en la pantalla, aquí hay un fragmento de código para 9:16 retrato.

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

translateY mantendrá este centro en la pantalla. calc(100vw * 16 / 9) es la altura esperada para 9/16.(100vw * 16 / 9 - 100vh) es la altura de desbordamiento, por lo que, tire hacia arriba overflow height/2 lo mantendrá centrado en la pantalla.

Para el paisaje, y mantener 16:9, muestra el uso

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

La relación 9/16 es fácil de cambiar, sin necesidad de predefinir 100:56.25 o 100:75.Si si desea garantizar la altura primero, debe cambiar la anchura y la altura, por ejemplo, height:100vh;width: calc(100vh * 9 / 16) para el retrato 9:16.

Si desea adaptar para diferentes tamaños de pantalla, también puede interesarle

• background-size cover / contain
  • El estilo anterior es similar a contener, depende de la relación anchura:altura.
• objeto-ajuste
  • cubierta / contiene para img / etiqueta de vídeo
• @media (orientation: portrait)/@media (orientation: landscape)
  • Consulta de medios para portrait/landscape para cambiar la proporción.

SCSS es la mejor solución en mi caso; usando un atributo de datos:

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

Por ejemplo:

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

Fuente

Digamos que tienes 2 divs el div externo es un contenedor y el interno podría ser cualquier elemento que necesites para mantener su relación (img o un iframe de youtube o lo que sea )

Html se ve así:

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

Digamos que necesitas mantener la proporción del "elemento"

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

Css se ve así

.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 */
}

Relleno cuando se especifica en % se calcula en base a la anchura no a la altura. .. así que básicamente no importa lo que su ancho siempre se calculará en base a eso . lo que mantendrá la proporción .

Solo una idea o un truco.

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>

Me he encontrado con este problema bastantes veces, así que hice una solución JS para él. Esto básicamente ajusta la altura del elemento DOMElement de acuerdo con el ancho del elemento por la relación que especifique. Puedes usarlo de la siguiente manera:

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

Tenga en cuenta que, dado que está configurando la altura del elemento, el elemento debe ser display:block o display:inline-block.

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

Si bien la mayoría de las respuestas son geniales, la mayoría de ellas requieren tener una imagen ya dimensionada correctamente... Otras soluciones solo funcionan para un ancho y no se preocupan por la altura disponible, pero a veces también desea ajustar el contenido a una cierta altura.

He intentado unirlos para traer una solución totalmente portátil y re-considerable... El truco es usar el escalado automático de una imagen, pero usar un elemento svg en línea en lugar de usar una imagen pre-renderizada o cualquier forma de segundo HTTP solicitud...

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>

Observe que he usado valores grandes en los atributos width y height del SVG, ya que necesita ser más grande que el tamaño máximo esperado, ya que solo puede reducirse. El ejemplo hace que la relación del div sea 10: 5

Si desea colocar un cuadrado dentro de la ventana en una vista vertical o horizontal (lo más grande posible, pero nada que se quede afuera), cambie entre usar vw/vh sobre la orientación portrait/landscape:

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

Esto es una mejora en la respuesta aceptada:

• Usa pseudo elementos en lugar de wrapper divs
• La relación de aspecto se basa en el ancho de la caja en lugar de su padre
• La caja se estirará verticalmente cuando el contenido se vuelva más 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>

Puede utilizar el diseño de flujo (FWD).

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

Escalará y mantendrá el diseño, es un poco complejo pero permite que una página cambie de tamaño sin empujar el contenido como (RWD).

Parece sensible pero está escalando. https://www.youtube.com/watch?v=xRcBMLI4jbg

Puede encontrar la fórmula de escalado CSS aquí:

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

Si toda la estructura del contenedor se basa en porcentajes, este sería el comportamiento predeterminado, ¿puede proporcionar un ejemplo más específico?

A continuación se muestra un ejemplo de lo que quiero decir, si toda su jerarquía padre estaba basada en%, cualquier ajuste de ventana del navegador funcionaría sin ningún js/css adicional, ¿no es esto una posibilidad con su diseño?

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

Usé una nueva solución.

.squares{
  width: 30vw
  height: 30vw

Relación de aspecto principal

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

Sin embargo, esto es relativo a todo el viewport. Por lo tanto, si necesita un div que sea el 30% del ancho de la ventana, puede usar 30vw en su lugar, y ya que conoce el ancho, los reutiliza en altura usando la unidad calc y vw.