Calcolatore delle proporzioni CSS

Calcola e genera valori delle proprietà delle proporzioni 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 proprietà delle proporzioni CSS mantiene le proporzioni degli elementi indipendentemente dalle dimensioni del contenitore. Essenziale per immagini, video e schede reattive. Sostituzione moderna della tecnica di imbottitura-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: proporzioni: larghezza/altezza; o proporzioni: 16/9;

Used with this

Similar tools that might be useful

Punteggio dell'atto

Calcola il punteggio dell'atto.

Convertitore ASCII

Converti testo in codici ASCII e viceversa. Utile per la programmazione e la codifica dei dati.

Calcolatore del tasso di accettazione

Calcola i tassi di accettazione dalle domande e dai dati di ammissione. Visualizza la selettività con i grafici.