Calculadora de relación de aspecto CSS

Calcule y genere valores de propiedades de relación de aspecto CSS.

Target Ratio

Width

Height

Preview

CSS snippets

Modern CSSRecommended

aspect-ratio: 16 / 9;

Legacy / IE Hack

position: relative;
padding-bottom: 56.25%;
height: 0;

"aspect-ratio" allows you to set the preferred ratio without hardcoding height, simplifying responsive images and iframes.

Overview

La propiedad de relación de aspecto de CSS mantiene las proporciones de los elementos independientemente del tamaño del contenedor. Esencial para imágenes, vídeos y tarjetas responsivos. Reemplazo moderno de la técnica padding-hack.

💡

Pro Tips

Provide a default aspect ratio for <img> elements to prevent 'Cumulative Layout Shift' during page load.
The padding-top/bottom trick works by basing the padding percentage on the parent's width.
You can now use `aspect-ratio` on almost all elements including divs, iframes, and videos.
If you provide both width and height PLUS an aspect-ratio, the width/height usually takes precedence in browsers.

Fun Facts

Formula: relación de aspecto: ancho / alto; o relación de aspecto: 16/9;

Used with this

Similar tools that might be useful

Puntuación del acto

Calcular la puntuación del acto.

Convertidor ASCII

Convierte texto a códigos ASCII y viceversa. Útil para programación y codificación de datos.

Calculadora de tasa de aceptación

Calcule las tasas de aceptación a partir de solicitudes y datos de admisiones. Visualice la selectividad con gráficos.