Mantener la relación de aspecto de un div con CSS
https://stackoverflow.com/questions/1495407
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Quiero crear una div que puede cambiar su anchura / altura como cambios en el ancho de la ventana.
¿Hay reglas CSS3 que permitirían la altura a cambio de acuerdo a la anchura, mientras que mantiene su relación de aspecto ?
Sé que puedo hacer esto a través de JavaScript, pero yo preferiría utilizando sólo CSS.
Solución
Hay que crear un <div> envoltorio con un valor porcentual para padding-bottom, como esto:
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}<div></div>
El resultado será un <div> con altura igual a 75% de la anchura de su contenedor. (Una proporción de 4: 3 de aspecto)
Esto se basa en el hecho de que para el relleno:
El porcentaje se calcula con respecto a la anchura del bloque de contención de la caja generada [...] (fuente: w3.org , énfasis mío)
valores de relleno de fondo para otras relaciones de aspecto y anchura 100%:
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
contenido de Colocación en la div:
Con el fin de mantener la relación de aspecto de la div e impedir su contenido de estirarla, es necesario agregar un niño con posición absoluta y se extienden a los bordes de la envoltura con:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Aquí está un demostración y otro más en profundidad demostración
Otros consejos
vw:
Puede utilizar unidades vw tanto para el anchura y la altura del elemento. Esto permite que la relación de aspecto del elemento que se conserva, en base a la anchura de la ventana gráfica.
vw: 1 / 100a de la anchura de la ventana gráfica. [ MDN ]
Alternativamente, también se puede utilizar vh para la altura de la ventana gráfica, o incluso vmin / vmax utilizar el menor / mayor de las dimensiones de ventana gráfica (discusión aquí ).
Ejemplo: 1: 1 relación de aspecto
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>
Para otras relaciones de aspecto, puede utilizar la tabla siguiente para calcular el valor para la altura de acuerdo con la anchura del elemento:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
Ejemplo: rejilla de 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í está una violín con esta demostración y aquí es una solución para hacer un rejilla sensible de cuadrados con contenido verticalmente y horizontalmente centrado .
Compatibilidad con navegadores para las unidades de VH / vw es IE9 + ver canIuse para obtener más información
He encontrado una manera de hacer esto con CSS, pero hay que tener cuidado ya que puede cambiar en función del flujo de su propio sitio web. Lo he hecho con el fin de insertar vídeo con una relación de aspecto constante dentro de una parte de anchura fluida de mi sitio web.
Digamos que tienes un vídeo incrustado como esto:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
A continuación, podría colocar todo esto dentro de un div con una clase de "video". Esta clase de vídeo será probablemente el elemento líquido en su sitio web de tal manera que, por sí mismo, no tiene restricciones de altura directos, pero al cambiar el tamaño del navegador que va a cambiar de ancho de acuerdo con el flujo de la página web. Este sería el elemento que probablemente está tratando de obtener el vídeo incrustado en un cierto tiempo que se mantiene la relación de aspecto del vídeo.
Con el fin de hacer esto, pongo una imagen antes de que el objeto incrustado dentro de la "video" div class.
!!! La parte importante es que la imagen tiene la relación de aspecto correcta que desea mantener. También, asegúrese de que el tamaño de la imagen es al menos tan grande como el más pequeño que espera el video (o lo que está manteniendo el A. R. de) para ser la base de su diseño. Esto evitará cualquier posible problema en la resolución de la imagen que haya cambiado el tamaño de porcentaje. Por ejemplo, si desea mantener una relación de aspecto de 3: 2, no sólo tiene que utilizar una imagen 3px por 2px. Puede funcionar en algunas circunstancias, pero no he probado, y probablemente sería una buena idea evitar.
Usted debe probablemente ya tener una anchura mínima como esta definido por los elementos del fluido de su sitio web. Si no es así, es una buena idea hacerlo con el fin de evitar elementos cortando o tener solapamiento 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 de la anchura de una página web debe recibir es de alrededor de ~ 600px (incluyendo las columnas de ancho fijo), ya que las resoluciones de pantalla más pequeña no vienen a menos que se trata de sitios de telefonía ambiente. !!!
Yo uso un png completamente transparente, pero realmente no creo que termina importar si lo haces bien. De esta manera:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Ahora usted debería ser capaz de añadir CSS similar al 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 de que también elimina cualquier altura o declaración explícita de anchura dentro de las etiquetas object y embed que por lo general vienen con código de inserción copia / pegado.
El modo de funcionamiento depende de las propiedades de posición del elemento de clase de vídeo y el elemento que desea tener mantener una cierta relación de aspecto. Se aprovecha de la forma en una imagen mantendrá su relación de aspecto adecuada cuando cambiar de tamaño en un elemento. Se dice que cualquier otra cosa que está en elemento de clase de vídeo para tomar ventaja completa-de los bienes inmuebles proporcionada por la imagen dinámica al obligar a su anchura / altura al 100% del elemento de clase de vídeo está ajustada por la imagen.
Muy bueno, ¿eh?
Es posible que tenga que jugar un rato con él un poco para conseguir que funcione con su propio diseño, pero esto realmente funciona sorprendentemente bien para mí. El concepto general es que hay.
Para añadir a la respuesta de Web_Designer, la <div> tendrá una altura (enteramente compuesta de relleno inferior) de 75% de la anchura de la misma es elemento que contiene . Aquí hay un buen resumen: http://mattsnider.com/css-using-percent-for- margen-y-relleno / . No estoy seguro de por qué esto debería ser así, pero eso es lo que es.
Si usted quiere que su div a ser una anchura que no sea 100%, se necesita otra div envoltorio en el que para 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;
}
He utilizado algo similar a la imagen truco de Elliot recientemente me permite utilizar las consultas de medios CSS para servir un archivo de logotipo diferente dependiendo de la resolución del dispositivo, pero aún así una escala parcial como un <img>, naturalmente, hacer (me puse el logotipo de fondo imagen para tan un .png transparente con la relación de aspecto correcta). Pero la solución de Web_Designer me ahorraría una petición http.
Elliot me inspiró a esta solución - gracias:
aspectratio.png es un archivo PNG-totalmente transparente con el tamaño de su ratio de aspecto preferido, 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);
}
Nota: background-size es una característica CSS3 que podría no funcionar con su objetivo navegadores. Es posible comprobar la interoperabilidad (F. E. en caniuse.com ).
Como se indica en rel="noreferrer"> y algo reiteró en este aceptado respuesta , valores de relleno como porcentajes (énfasis):
Especifica el relleno en porcentaje de la anchura de la contiene elemento
Ergo, un correcto ejemplo de un DIV sensible que mantiene una proporción de 16: 9 es la 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>
Basándose en sus soluciones que he hecho algún truco:
Cuando se usa, el código HTML será sólo
<div data-keep-ratio="75%">
<div>Main content</div>
</div>
Para usarlo de esta manera de la marca: 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 tener presente que acaba de establecer data-keep-ratio attr a la altura / anchura y eso es todo.
Puede utilizar un SVG. Hacer que la posición del contenedor / envoltura relativa, poner el SVG primero como staticly posicionado y luego poner el contenido con posición absoluta (parte superior: 0; izquierda: 0; derecha: 0; parte inferior: 0;)
Ejemplo con 16: 9 proporciones:
image.svg: (puede ser inline 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 la integración de SVG no parecen funcionar, pero se puede urlencode el SVG e incrustarlo en img src atributo 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 manera de utilizar vh / vw, también necesito una forma de centro de la pantalla, aquí es un fragmento de código para 09: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. Se espera calc(100vw * 16 / 9) altura de 9 / 16.(100vw * 16 / 9 - 100vh) es la altura de desbordamiento, por lo que, tire hacia arriba overflow height/2 lo mantendrá en la pantalla central.
En el paisaje y mantener 16: 9 , que muestran el uso
.container {
width: 100vw;
height: calc(100vw * 9 / 16);
transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}
La relación de 9/16 es la facilidad de cambiar, no hay necesidad de 100:56.25 predefinido o 100:75.If desea asegurarse de altura primero, debe cambiar la anchura y la altura, por ejemplo, height:100vh;width: calc(100vh * 9 / 16) de 09:16 retrato.
Si desea adaptada para diferentes tamaños de pantalla, es posible que también interés
- cubierta fondo de tamaño / contener
- Por encima de estilo es similar para contener, depende de la anchura:. Relación de altura
- ajuste a objetos
- / cubierta para contener etiqueta img / vídeo
-
@media (orientation: portrait)/@media (orientation: landscape)- consulta de medios para
portrait/landscapepara cambiar la relación.
- consulta de medios para
Esta es una mejora en la respuesta aceptada:
- Usos pseudo elementos en vez de divs envoltura
- La relación de aspecto se basa en la anchura de la caja en lugar de su padre
- El cuadro se extenderá verticalmente cuando el contenido se vuelve 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>
SCSS es la mejor solución en mi caso; utilizando 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>
Es sólo 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>
Digamos que tiene 2 divs el div outher es un contenedor y el interior podría ser cualquier elemento que se necesita para mantener su relación (img o un iframe youtube o lo que sea)
HTML se parece a esto:
<div class='container'>
<div class='element'>
</div><!-- end of element -->
Digamos que usted necesita para mantener la relación entre el "elemento"
ratio => 4 a 1 o 2 a 1 ...
css se parece a esto
.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 no anchura altura. .. así que básicamente no importa lo que siempre se puede calcular su altura lo ancho a base de eso. que mantendrá la relación.
Mientras que la mayoría de las respuestas son muy fresco, la mayoría de ellos requieren tener una imagen ya dimensionada correctamente ... Otras soluciones sólo funcionan para una anchura y no se preocupan de la altura disponible, pero a veces se quieren encajar el contenido en una cierta altura también.
He intentado acoplarlos juntos para traer una solución totalmente portátil y volver a considerable ... El truco es utilizar a escala automática de una imagen pero el uso de un elemento en línea SVG en lugar de utilizar una imagen pre-renderizados o cualquier tipo de petición HTTP segundo ...
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>
Tenga en cuenta que he utilizado grandes valores de la anchura y la altura de los atributos del SVG, ya que tiene que ser más grande que el tamaño máximo esperado, ya que sólo puede encogerse. El ejemplo hace relación 10 de la div: 5
Si desea encajar un cuadrado dentro de la ventana de retrato o paisaje (la más grande posible, pero nada se pegue exterior), cambiar entre el uso de vw / vh en la orientación portrait / landscape:
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
una solución inteligente usando <svg> y display:grid.
Cuadrícula elemento le permite ocupar el mismo espacio con dos (o más) elementos, sin necesidad de especificar cuál define la altura. Lo que significa que, fuera de la caja, uno del más alto establece la relación .
Esto significa que se puede utilizar como es cuando se conoce el contenido nunca será lo suficientemente alto como para llenar toda la "relación" y que está buscando simplemente una manera de colocar el contenido en este espacio (es decir, para centrarla en ambas direcciones utilizan
display:flex; align-items:center; justify-content:center).
Es más o menos lo mismo que usar un <img> transparente con display:block y relación predeterminada, excepto el <svg> es más ligero y mucho más fácil de modificar (para cambiar la relación responsablemente, si necesita).
<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;
}
Todo lo que necesita hacer es cambiar la relación <svg>s:
-
<svg viewBox="0 0 4 3"></svg> -
<svg viewBox="0 0 16 9"></svg>
ver su funcionamiento:
.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>
Si necesita una solución en la que no se permite que el elemento de contenido para ajustar la relación cuando es más alto (con rebosadero oculto o automático), es necesario establecer position:relative en la parrilla y position:absolute; height:100%; overflow-y: auto; en el contenido. Ejemplo:
.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>
Me gustaría compartir mi solución, en la que tengo una img-tag llenar una cierta relación de aspecto. No podía utilizar background debido a la falta de apoyo de la CMS y no me prefiere usar una etiqueta de estilo de esta manera: <img style="background:url(...)" />. También, la anchura es de 100%, por lo que no necesita ser ajustada a un tamaño fijo, como en algunas de las soluciones. Se escalará responsablemente!
.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>
Me he encontrado con este problema bastante algunas veces, así que hice una solución JS para ello. Esto, básicamente, ajustar la altura de la DOMElement según la anchura del elemento por la relación que se especifique. Puedes usarla como sigue:
<div ratio="4x3"></div>
Tenga en cuenta que ya que está fijando la altura del elemento, el elemento debe ser un display:block o display:inline-block.
Diga que usted pueda mantener Ancho: 100px y la altura: 50px (es decir, 2: 1) Sólo hacer este cálculo:
.pb-2to1 {
padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
Se puede usar el esquema de flujo (FWD).
https://en.wikipedia.org/wiki/Adaptive_web_design
Se escalar y mantener la disposición, es un poco complejo, pero permite una página para cambiar el tamaño sin empujar el contenido como (RWD).
Parece que responden pero está aumentando. https://www.youtube.com/watch?v=xRcBMLI4jbg
Puede encontrar la fórmula de escala CSS aquí:
He utilizado una nueva solución.
.squares{
width: 30vw
height: 30vw
Para proporción principal aspecto
.aspect-ratio
width: 10vw
height: 10vh
Sin embargo, esto es relativo a la totalidad de la ventana gráfica. Por lo tanto, si necesita un div que es un 30% del ancho de la ventana gráfica, puede utilizar 30vw lugar, y ya que usted sabe el ancho, que los reutilice en altura con Calc y vw unidad.
Si toda la estructura del contenedor se basó porcentaje, este sería el comportamiento por defecto, se puede proporcionar un ejemplo más específico?
A continuación se muestra un ejemplo de lo que quiero decir, si su jerarquía completa de los padres se basó%, cualquier ajuste de la ventana del navegador podría funcionar sin ningún tipo de js / css adicional, esto no es una posibilidad con su diseño?
<div style="width: 100%;">
<div style="width: 50%; margin: 0 auto;">Content</div>
</div>
