Mantener la relación de aspecto de acuerdo con el ancho y la altura

Es posible ajustar y centrar un div cuadrado en la ventana gráfica y mantener siempre su relación de aspecto de acuerdo con el ancho y la altura .

Requisitos:

  • solo CSS
  • el tamaño del cuadrado debe adaptarse a la dimensión más pequeña (ancho o alto) de la ventana gráfica, independientemente de la orientación (horizontal o vertical) de la ventana gráfica.
  • el cuadrado debe estar centrado horizontaly y verticaly en la ventana gráfica

Ejemplo:

Mantener la relación de aspecto de acuerdo con el ancho y la altura de la ventana gráfica

Para mantener la relación de aspecto de un div de acuerdo con el ancho y el alto en la ventana gráfica, puede usar una etiqueta HTML con:

  1. unidades vmin para el dimensionamiento:

    vmin 1/100 del valor mínimo entre la altura y el ancho de la ventana gráfica.
    (fuente: MDN )

  2. position: absolute y margin: auto; para el centrado

DEMO ( cambia el tamaño de la altura y el ancho de la ventana para verla en acción)

Caracteristicas :

  • mantiene su relación de aspecto de acuerdo con el ancho y la altura
  • permanece centrado en la ventana horizontal y verticalmente
  • nunca desborda la ventana gráfica

Soporte del navegador:

vmin unidades vmin son compatibles con IE10 + ( canIuse ) para soporte de IE9, necesita usar un respaldo con unidades vm lugar de vmin esta manera:

 width: 100vm; /* <-- for IE9 */ height: 100vm; /* <-- for IE9 */ width: 100vmin; height: 100vmin; 

Código completo:

 body { margin:0; /* To prevent scrollbars */ } div{ /* Aspect ratio */ height:100vm; width:100vm; /* IE9 fallback */ width: 100vmin; height: 100vmin; /*Centering */ position: absolute; top:0;bottom:0; left:0;right:0; margin: auto; /* styling */ background: gold; } 
 
whatever content you wish

Puede lograr un cuadrado receptivo utilizando las unidades vw & vh (longitudes de porcentaje de ventana gráfica) para dimensionarlo.

Compruebe la compatibilidad del navegador: http://caniuse.com/viewport-units


Solución que implementa escalado horizontal y vertical

Página de muestra en vivo: http://sample.easwee.net/responsive-square/

 .container { display:table; width:100%; height:100%; } .container-row { display:table-row; } .container-cell { display:table-cell; vertical-align:middle; text-align:center; } .square { display:inline-block; background:red; border: 3px solid blue; } @media(orientation:landscape) { .square { width: 100vh; height: 100vh; } } @media(orientation:portrait) { .square{ width: 100vw; height: 100vw; } } 
 

He combinado las excelentes respuestas de @ ken-sharpe y @easwee para crear una versión para proporciones de aspecto no cuadrado: https://codepen.io/anon/pen/GyqopP

 div { position: absolute; top:0;bottom:0; left:0;right:0; margin: auto; width: 100vw; height: 50vw; background: #326384; } @media (min-aspect-ratio: 2/1) { div { width: 200vh; height: 100vh; background-color:green; } } 

Usa algo como esto

 .container{ display:block; background:#f2f2f2; } .square{ width:50%; padding-top:50%; margin: auto; background:#e5e5e5; } 

MANIFESTACIÓN

    Intereting Posts