§ 17

Proporcje obrazu i zarezerwowana wysokość

Jak wysoka będzie pudełko i co powinno być w aspect-ratio?

Odpowiedź: Gdy obraz jest ładowany bez wiedzy przeglądarki o wysokości, tekst poniżej przeskakuje. Liczy się do CLS. Rozwiązaniem jest podanie img szerokości i wysokości lub ustawienie proporcji, aby rezerwować miejsce. Wprowadź naturalne wymiary obrazu i szerokość, w której jest wyświetlany, i uzyskaj wysokość, stosunek kształtu i stary procent padding-top.

Wzór

Højde = visningsbredde × naturlig højde ÷ naturlig bredde

aspect-ratio: szerokość / wysokość, np. aspect-ratio: 1600 / 900

Den gamle teknik: padding-top = højde ÷ bredde × 100 % på en boks med position: relative

Symbole i jednostki we wzorze
Symbol	Znaczenie	Jednostka
orig_b	Naturalna szerokość obrazu	px
orig_h	Naturalna wysokość obrazu	px
vis_b	Szerokość widoku w CSS	px
=	Wysokość zarezerwowana przy szerokości wyświetlania	px
=	Współczynnik proporcji (szerokość ÷ wysokość)
=	padding-top do starej techniki	%

Ważność i źródło

Źródło: web.dev 'Optimize CLS' + MDN aspect-ratio (CSS Box Sizing 4)

Nie dotyczy, gdy

Nowoczesne przeglądarki obliczają stosunek obrazu na podstawie atrybutów szerokości i wysokości img, więc dwie liczby są najważniejsze. Jeśli obraz jest przycinany za pomocą object-fit: cover, obowiązuje proporcje pola, a nie obrazu.

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

Naturalna szerokość obrazu1600 px
Naturalna wysokość obrazu900 px
Szerokość widoku w CSS343 px

Dawca

Wysokość zarezerwowana przy szerokości wyświetlania192,9 px
Współczynnik proporcji (szerokość ÷ wysokość)1,7778
padding-top do starej techniki56,250 %

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

Sådan bruger du den

Billeder uden kendt højde får teksten til at hoppe, når de indlæses, og det koster i CLS. Med width og height på img eller aspect-ratio i CSS reserverer browseren pladsen fra starten. Beregneren viser højden ved din visningsbredde og de tal, der skal i CSS'en.

Krok za krokiem

Find billedets naturlige bredde og højde i filen eller fra CMS'et.
Skriv dem som width og height på img. Så regner browseren selv forholdet.
Til et kort med object-fit eller et baggrundsbillede: sæt aspect-ratio: bredde / højde på boksen.
Højden ved en given bredde er bredden gange højde delt med bredde.

Typowe błędy

At skrive width og height med CSS-størrelsen i stedet for billedets naturlige mål. Det er forholdet, der tæller.
At sætte height: auto uden width og height på img. Så kender browseren ikke forholdet før billedet er hentet.
At blande billeder med forskellige forhold i et grid uden en fast aspect-ratio på kortet.

Przykłady z codzienności

Hero på en telefon

En restaurants hero-billede er 1600 × 900 px og vises 343 px bredt på en iPhone.

Naturalna szerokość obrazu: 1600 px
Naturalna wysokość obrazu: 900 px
Szerokość widoku w CSS: 343 px

To znaczy: Browseren skal reservere 192,9 px i højden. Sideforholdet er 1,7778 (16 : 9), og den gamle padding-top-teknik ville bruge 56,25 %.

Produktbillede på højkant

En tøjbutiks produktbilleder er 1200 × 1500 px og vises 280 px brede i et grid.

Naturalna szerokość obrazu: 1200 px
Naturalna wysokość obrazu: 1500 px
Szerokość widoku w CSS: 280 px

To znaczy: Hvert kort skal have 350 px højde til billedet. Sideforholdet er 0,8, altså 4 : 5, og padding-top ville være 125 %.

Reguła praktyczna

16 : 9 giver en højde på ca. 0,56 gange bredden, 4 : 3 ca. 0,75 og 4 : 5 hele 1,25.

Jak sprawdzić odpowiedź

Kør Lighthouse eller se Layout Shift i DevTools. Billedet må ikke stå som årsag til et skift.