`aspect-ratio (Controlul Proporțiilor Nativ în CSS)` în CSS

Modelul de cutie (Box Model) CSS Box Sizing Level 4

Setează raportul de aspect pentru orice container sau imagine cu aspect-ratio (16/9, 1/1, 4/3), eliminând vechiul truc cu padding-top procentual.

Sintaxă CSS

aspect-ratio: 16 / 9; aspect-ratio: 1 / 1;

Proprietatea aspect-ratio permite definirea unui raport fix și proporțional între lățimea și înălțimea oricărui element HTML. Ea elimină definitiv celebrul hack arhaic „Padding-Top Hack” (unde se folosea padding-top: 56.25% pe un wrapper poziționat relativ pentru a păstra proporția 16:9 a unui clip YouTube).

Exemple practice pentru carduri, video și avataruri

/* 1. Cadru video panoramic standard 16:9 */
.video-responsive {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}

/* 2. Avatar circular perfect pătrat 1:1 */
.avatar-utilizator {
    width: 64px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

/* 3. Card de produs în format portret clasic e-commerce (3:4) */
.card-produs-imagine {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: #f8fafc;
}

Impact Direct pe Core Web Vitals (Zero CLS)

Combinată cu width: 100%, proprietatea aspect-ratio îi permite browserului să calculeze și să rezerve pe ecran înălțimea exactă a containerului înainte ca imaginea sau iframe-ul să se descarce. Acest lucru împiedică textul din pagină să sară brusc în jos la finalul descărcării, menținând scorul Cumulative Layout Shift (CLS) la valoarea optimă de 0.