Kalkulator proporcji obrazu

Jak korzystać z kalkulatora proporcji

1. Wybierz jedną z opcji Popularne proporcje (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) albo wpisz własne wartości w polu Proporcje lub oryginalny rozmiar. Możesz podać same proporcje (16 i 9) lub rzeczywiste wymiary obrazu, filmu czy ekranu (1920 i 1080).
2. Odczytaj wyniki: Proporcje uproszczone, Proporcje dziesiętne (szerokość podzielona przez wysokość), Orientacja oraz Najbliższy standard. Znak „≈” oznacza, że twój rozmiar jest bliski danemu standardowi, ale nie identyczny.
3. W sekcji Nowy rozmiar (z zachowaniem proporcji) wpisz Nowa szerokość, aby otrzymać pasującą wysokość, albo Nowa wysokość, aby otrzymać szerokość. Wiersz poniżej pokazuje obliczenie. Odznacz Zaokrąglaj do pełnych pikseli, jeśli potrzebujesz dokładnej wartości, np. przy wymiarach wydruku w milimetrach.
4. Przycisk Zamień szerokość z wysokością zmienia proporcje poziome na pionowe (16:9 staje się 9:16) i z powrotem.
5. Podgląd rysuje prostokąt o twoich proporcjach, a tabela podaje rozmiar każdego popularnego formatu przy nowej szerokości.
6. Skopiuj Kod CSS przyciskiem Kopiuj.

Jak działa obliczenie

Proporcje obrazu to szerokość podzielona przez wysokość, zapisana jako dwie liczby całkowite. Aby je uprościć, narzędzie dzieli obie strony przez ich największy wspólny dzielnik (NWD): NWD liczb 1920 i 1080 to 120, więc 1920:1080 = 16:9. Wartości dziesiętne są najpierw mnożone przez potęgę dziesięciu (2,39:1 staje się 239:100).

Zmiana rozmiaru z zachowaniem proporcji to zwykła reguła trzech:

• nowa wysokość = nowa szerokość × oryginalna wysokość ÷ oryginalna szerokość
• nowa szerokość = nowa wysokość × oryginalna szerokość ÷ oryginalna wysokość

Przykład: film 16:9 o szerokości 1280 px ma 1280 × 9 ÷ 16 = 720 px wysokości.

Niektóre ekrany mają „nietypowe” proporcje. Laptop 1366 × 768 upraszcza się do 683:384, czyli 1,779:1 – włos od 16:9 (1,778:1), stąd wynik „≈ 16:9”. Monitory sprzedawane jako 21:9 mają w rzeczywistości proporcje 64:27 (2560 × 1080) lub 43:18 (3440 × 1440), dlatego oba formaty są w tabeli.

Właściwość CSS aspect-ratio

aspect-ratio: 16 / 9; każe przeglądarce samodzielnie wyliczyć brakujący wymiar: przy width: 100% wysokość dopasowuje się automatycznie, a element skaluje się razem z kontenerem. Działa we wszystkich aktualnych przeglądarkach (od 2021 roku) i świetnie sprawdza się przy osadzonych filmach, kartach, miejscach na obrazy i miniaturach. W połączeniu z object-fit: cover na obrazach przycina je zamiast rozciągać.

Kod zawiera też starszą technikę z padding-top jako rozwiązanie awaryjne: procentowy padding liczy się od szerokości, więc padding-top: 56.25% (9 ÷ 16) rezerwuje obszar 16:9, a treść jest pozycjonowana absolutnie w jego wnętrzu. Potrzebujesz jej tylko dla bardzo starych przeglądarek.

Zarezerwowanie miejsca za pomocą proporcji zapobiega też przesuwaniu się układu podczas ładowania obrazów i filmów, co poprawia wskaźnik Cumulative Layout Shift (CLS).