Jak używać
- Aby zmienić rozmiar, wpisz proporcje (na przykład 16 i 9) lub wybierz jedną z popularnych wartości, a następnie podaj szerokość albo wysokość. Drugi wymiar zostanie obliczony.
- Aby obliczyć proporcje, podaj szerokość i wysokość obrazu, ekranu lub filmu.
- Sprawdź podgląd i skopiuj regułę CSS aspect-ratio, jeśli potrzebujesz jej w układzie strony.
Jak to działa
Zmiana rozmiaru z zachowaniem proporcji odbywa się według wzoru: wysokość = szerokość × wysokość proporcji ÷ szerokość proporcji (i odwrotnie). Rozmiary w pikselach są zwykle liczbami całkowitymi, więc wynik może być zaokrąglony. Jeśli proporcji nie da się dokładnie zastosować, jak w przypadku 16:9 przy szerokości 1000, zaokrąglona wysokość (563) jest przybliżeniem, a nie dokładnym dopasowaniem.
Proporcje upraszcza się, dzieląc obie liczby przez ich największy wspólny dzielnik: 1920 i 1080 mają wspólny dzielnik 120, więc otrzymujemy 16:9. Niektórych rzeczywistych rozmiarów nie da się sprowadzić do powszechnie znanych proporcji. 1366×768 to dokładnie 683:384 — proporcja bardzo zbliżona do 16:9. Dlatego narzędzie pokazuje też najbliższe popularne proporcje, jeśli różnica nie przekracza 2%. Podobnie monitory „21:9” mają w rzeczywistości proporcje 64:27 (2560×1080) lub 43:18 (3440×1440); 21:9 to nazwa marketingowa.
W CSS właściwość aspect-ratio: 16 / 9 sprawia, że element zachowuje te proporcje przy zmianie szerokości. Przydaje się to w przypadku osadzonych filmów i placeholderów obrazów, które nie powinny przesuwać układu strony podczas wczytywania.
Przykłady
Rozmiar miniatury filmu
Miniatura w proporcjach 16:9 o szerokości 1280 pikseli powinna mieć 720 pikseli wysokości.
Ustalanie proporcji ekranu
2560×1600 po uproszczeniu daje proporcje 8:5, czyli takie same jak 16:10 — popularne w laptopach.
Pionowy kadr do mediów społecznościowych
Przy proporcjach 4:5 i szerokości 1080 wysokość wynosi 1350 — taki pionowy format akceptuje wiele kanałów społecznościowych.
Często zadawane pytania
Czy 16:9 to to samo co 1,78:1?
Tak. 16 ÷ 9 ≈ 1,778, więc oba zapisy opisują te same proporcje. Format kina często podaje się w postaci liczby dziesiętnej, np. 2,39:1.
Dlaczego wynik zawiera miejsca po przecinku?
Nie każda szerokość dzieli się bez reszty przez proporcje. Przy wymiarach w pikselach włącz zaokrąglanie. Wynik będzie wtedy zaokrąglony do najbliższego piksela, więc proporcje mogą się nieznacznie różnić od dokładnych.
Czy właściwość CSS aspect-ratio działa we wszystkich przeglądarkach?
Właściwość jest obsługiwana we wszystkich aktualnych, głównych przeglądarkach. Jeśli dla elementu ustawiono też osobno szerokość i wysokość, te wartości mają pierwszeństwo przed aspect-ratio.
Prywatność
Wszystkie obliczenia odbywają się w przeglądarce. Żadne dane nie są wysyłane ani przechowywane.