S-a rezolvat raportul de aspect pentru elementele HTML

În calitate de dezvoltator web, sunteți adesea jenat să lucrați cu elemente HTML care prin ele însele - spre deosebire de elementul img, de exemplu - nu au nici o dimensiune fixă, nici un raport de aspect fix. Deseori doriți să realizați că aceste obiecte se comportă în mod receptiv, dar proporția dintre lățime și înălțime este menținută. CSS nu oferă o soluție intuitivă aici în mod implicit. Dar cu ajutorul proprietății de căptușire verticală vă puteți atinge obiectivul.


Să luăm exemplul de zi cu zi cu imagini cu articole pătrate, ale căror grafice nu sunt neapărat pătrate, dar am dori să le afișăm cu raportul de aspect 1: 1 fără efort suplimentar și, mai presus de toate, fără distorsiuni, prin care lățimea lor (și astfel și înălțimea) se schimbă în mod sensibil ar trebui să. Cu următorul cod este foarte ușor să faceți acest lucru fără marcaj suplimentar cu ajutorul CSS:

1bc3a80de3db90cdf0535541236d95f2

cu rezultatul

 

Dar de ce funcționează și cum pot fi create alte raporturi de aspect? Cheia acestui lucru constă în proprietatea de umplere, care - dată în valori procentuale - se bazează întotdeauna pe aceeași valoare de bază ca proprietatea Lățime (și anume lățimea elementului părinte). Cu padding-stânga și padding-dreapta acest lucru este evident, cu padding-top și padding-bottom surprinzător, dar foarte util în acest caz.

Dacă doriți un raport de aspect de 16: 9, de exemplu, alegeți lățimea valorilor: 100%; fundul de umplutură: 56,25%;. Un raport de aspect care ține cont de raportul auriu este lățimea: 100%; fundul de umplutură: 61,81%; realizabil.

Cu ajutorul calcului puteți specifica direct raportul de aspect, de exemplu pentru 16: 9 cu fundul de umplutură: calc (1 / (16/9) * 100%). Dacă elementul constă din alte elemente imbricate, elementul copil este poziționat absolut pentru a compensa umplerea elementului părinte:

1bc3a80de3db90cdf0535541236d95f2

Acest lucru duce la următorul rezultat:

...
Înapoi