Mantener la relación de aspecto de un div con CSS

Quiero crear un div que puede cambiar su ancho / alto a medida que cambia el ancho de la ventana.

¿Existen reglas CSS3 que permitan que la altura cambie de acuerdo con el ancho? manteniendo su relación de aspecto?

Sé que puedo hacer esto a través de JavaScript, pero preferiría usar solo CSS.

div manteniendo la relación de aspecto de acuerdo con el ancho de la ventana

preguntado el 29 de septiembre de 09 a las 20:09

Escribí sobre diferentes enfoques para esto en mi artículo CSS-Tricks sobre escalado de animaciones receptivas -

Llegué a esta sesión de preguntas y respuestas muy tarde, pero debo comentar. Aunque es muy disciplinado y está dentro de las reglas de SO de todos los que responden para hacer todo lo posible para satisfacer la demanda de "solo CSS" de la pregunta, es bastante sorprendente que, con la excepción del respuesta de user007 En la parte inferior de la página, nadie ha mencionado lo obvio: no existe una solución confiable solo de CSS, este problema requiere Javascript. Un novato que ingrese a esta página podría perder un tiempo valioso cambiando de un conjunto de pros / contras a otro antes de que se apague la bombilla: solo CSS no es suficiente. -

Escribí una pequeña herramienta que facilita la vista previa y el cálculo de relaciones de aspecto, Aspectrat.io. También genera el código CSS / Sass / Less apropiado que puede copiar y pegar en sus proyectos. Espero que la gente lo encuentre útil. -

Esta pregunta es para establecer altura basados en anchura. Si necesita lo contrario, consulte Configuración del ancho del elemento en función de la altura mediante CSS. -

Todas las soluciones CSS sugeridas aquí tienen limitaciones. Actualmente no existe una solución de propósito general sin javascript. @Web_Designer tiene una buena solución, pero solo mantiene la proporción basada en el ancho. Si desea mantener esa proporción para un contenedor donde el ancho Y la altura son importantes, no funcionará. También se encontrará con problemas similares al usar vw y vh, porque debe bloquear uno u otro. Estas limitaciones probablemente no sean un problema para el contenido de desplazamiento, pero otras aplicaciones que dependen de una altura limitada, necesitarán javascript. -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.