Generador de cuadros de relación de aspecto Genera cuadros de relación de aspecto responsivos con enfoques modernos y heredados de CSS.
Generador de cuadros de relación de aspecto
Genera cuadros de relación de aspecto responsivos con enfoques modernos y heredados de CSS.
Selecciona una proporción preestablecida o personalizada
Elige entre proporciones comunes (16:9, 4:3, 1:1) o ingresa valores personalizados.
Configura el cuadro
Establece el ancho máximo, el color de fondo y elige entre el enfoque moderno o heredado de CSS.
Copia el CSS
Previsualiza el cuadro de proporción y copia el código CSS.
What Is Generador de cuadros de relación de aspecto?
El Generador de Cuadros de Relación de Aspecto crea contenedores responsivos que mantienen una relación de ancho a alto específica independientemente de su tamaño. Mantener las relaciones de aspecto es fundamental para videos, imágenes, tarjetas y cualquier elemento que necesite dimensiones proporcionales. Esta herramienta ofrece ocho preajustes comunes: 1:1 (cuadrado), 4:3 (estándar), 16:9 (pantalla ancha), 21:9 (ultra ancha), 3:2 (fotografía), 9:16 (retrato), 2:3 (póster) y 3:4 (tableta). También puede establecer valores de relación personalizados. La herramienta admite tanto la propiedad moderna de CSS aspect-ratio como la técnica heredada de padding-bottom para una mayor compatibilidad con los navegadores. La vista previa muestra el cuadro de relación de aspecto con un ancho máximo y color de fondo personalizables, y el CSS generado incluye el enfoque elegido.
Why Use Generador de cuadros de relación de aspecto?
-
Ocho preajustes de proporciones comunes más entrada personalizada
-
Tanto enfoques modernos (aspect-ratio) como heredados (padding-bottom) de CSS
-
Ancho máximo y color de fondo personalizables
-
La previsualización muestra con precisión el cuadro proporcional
Common Use Cases
Contenedores de video
Crea contenedores responsivos 16:9 para videos incrustados.
Marcadores de posición de imagen
Reserva espacio para las imágenes mientras se cargan para evitar cambios en el diseño.
Tarjetas responsivas
Mantén proporciones consistentes de tarjeta en diferentes tamaños de pantalla.
Galerías de fotos
Crea contenedores de imagen uniformes para diseños de cuadrícula de galería.
Technical Guide
La propiedad moderna de CSS aspect-ratio establece directamente la relación de aspecto preferida: aspect-ratio: 16 / 9. El navegador calcula automáticamente la altura en función del ancho del elemento. Esto está soportado en todos los navegadores modernos desde 2021. La técnica heredada utiliza padding-bottom como porcentaje del ancho (ya que los porcentajes de relleno son relativos al ancho del padre): padding-bottom: 56,25% crea una relación 16:9 (9/16 * 100 = 56,25%). El enfoque heredado requiere position: relative en el contenedor y position: absolute; top: 0; left: 0; width: 100%; height: 100% en el contenido del hijo. El enfoque moderno es más simple y legible. Ambos métodos crean contenedores responsivos que mantienen su relación en cualquier ancho. La propiedad max-width limita el tamaño del contenedor. Para las imágenes, la propiedad object-fit controla cómo la imagen llena el contenedor de relación de aspecto.
Tips & Best Practices
-
1Utiliza la propiedad aspect-ratio moderna para un código más limpio y simple
-
2Vuelve al técnico de padding-bottom para admitir navegadores más antiguos
-
3Utiliza object-fit: cover en las imágenes dentro de los contenedores de proporción
-
4Establece el ancho máximo para evitar que el cuadro se vuelva demasiado grande en pantallas anchas
Related Tools
Espacio de pruebas de CSS Flexbox
Explorador visual de CSS Flexbox con controles interactivos para todas las propiedades del contenedor flexible.
🎨 CSS & Design
Zona de pruebas de CSS Grid
Constructor visual de CSS Grid con controles interactivos para columnas de plantilla, filas y espacios.
🎨 CSS & Design
Probador de Diseño Responsivo
Previsualiza sitios web en puntos de interrupción comunes de dispositivos con un visor de iframe integrado.
🎨 CSS & Design
Generador de consultas de medios
Genera consultas de medios CSS con condiciones de características y puntos de interrupción preestablecidos.
🎨 CSS & DesignFrequently Asked Questions
Q ¿Qué es aspect-ratio en CSS?
Q ¿Está admitido el aspect-ratio en todas partes?
Q ¿Qué es el truco de padding-bottom?
Q ¿Cómo coloco contenido dentro de un cuadro de proporción?
Q ¿Puedo utilizar aspect-ratio con imágenes?
About This Tool
Generador de cuadros de relación de aspecto is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.