Rules Hub
Coding Rules Library
Prevent layout shifts with aspect-ratio on images
Always define `aspect-ratio` and use `max-width` for responsive images to reserve layout space and prevent Cumulative Layout Shift (CLS).
Bad example
| 1 | img { |
| 2 | display: block; |
| 3 | width: 100%; |
| 4 | height: auto; |
| 5 | } |
Explanation (EN)
Using only `width: 100%` and `height: auto` means the browser cannot calculate the image's height until the file is fully downloaded. This causes the page layout to jump (CLS) as the image loads.
Objašnjenje (HR)
Korištenje samo `width: 100%` i `height: auto` znači da preglednik ne može izračunati visinu slike dok se datoteka potpuno ne preuzme. To uzrokuje pomicanje layouta (CLS) tijekom učitavanja.
Good example
| 1 | img { |
| 2 | display: block; |
| 3 | max-width: 100%; |
| 4 | height: auto; |
| 5 | aspect-ratio: 16 / 9; |
| 6 | } |
Explanation (EN)
Setting `aspect-ratio` allows the browser to reserve the correct vertical space immediately before the image loads. Using `max-width` ensures the image is fluid but respects its intrinsic resolution if the container is larger.
Objašnjenje (HR)
Postavljanje `aspect-ratio` omogućuje pregledniku da odmah rezervira točan vertikalni prostor prije nego se slika učita. Korištenje `max-width` osigurava da je slika fluidna, ali poštuje svoju izvornu rezoluciju ako je kontejner širi.