Matematika
Kalkulačka šírky prvku v percentách
Šírka 300 px v kontajneri 1 200 px je 25 %. Vyplňte vstupy a pozrite si výsledok aj vysvetlenie výpočtu.
Bezplatná online kalkulačka
Šírka prvku v percentách
25%
Zadajte šírku prvku a šírku rodičovského kontajnera. Kalkulačka vypočíta percentuálnu šírku pre CSS.
Ukážka šírky prvku v kontajneri
Percentuálna šírka sa počíta voči šírke rodičovského kontajnera. Ak sa zmení šírka kontajnera, prvok sa bude v percentách prispôsobovať responzívne.
Kalkulačka šírky prvku v percentách sa hodí pri responzívnom dizajne, grid rozloženiach, kartách, stĺpcoch, obrázkoch a pri prepočte pevnej šírky v pixeloch na CSS percentá.
Výpočet šírky prvku v percentách pre CSS
Kalkulačka šírky prvku v percentách je užitočná pri tvorbe responzívneho webu, keď potrebujete prepočítať pevnú šírku v pixeloch na percentuálnu hodnotu voči rodičovskému kontajneru. Hodí sa pri kartách, stĺpcoch, obrázkoch, blokoch obsahu, grid rozloženiach alebo pri úprave prvkov, ktoré sa majú prispôsobovať šírke obrazovky.
Výpočet pracuje s dvomi údajmi. Zadáva sa šírka prvku v px a šírka rodičovského kontajnera v px. Z týchto hodnôt kalkulačka vypočíta, akú časť kontajnera daný prvok zaberá. Použitý výpočet vychádza zo vzorca šírka prvku delená šírkou kontajnera krát 100. Výsledkom je percentuálna šírka, ktorú je možné použiť v CSS ako hodnotu width.
Hlavný výsledok zobrazuje šírku prvku v percentách. Okrem toho kalkulačka ukáže pôvodnú šírku prvku, šírku kontajnera, vzorec výpočtu, CSS zápis a pomer k rodičovskému prvku. Súčasťou výsledku je aj jednoduché hodnotenie, napríklad či ide o štvrtinu kontajnera, polovicu kontajnera, väčšinu kontajnera alebo prvok širší než samotný kontajner.
Praktická je aj vizuálna ukážka šírky prvku v kontajneri. Tá pomáha rýchlo pochopiť, čo výsledné percento znamená v rozložení stránky. Ak je napríklad prvok široký 300 px a rodičovský kontajner má 1200 px, výsledkom je 25 %. CSS zápis potom môže byť width: 25%;. Takáto hodnota znamená, že prvok bude zaberať štvrtinu dostupnej šírky rodiča.
Na výsledok má najväčší vplyv pomer medzi šírkou prvku a šírkou kontajnera. Ak zmeníte iba šírku kontajnera, percentuálna hodnota sa zmení aj pri rovnakej šírke prvku. Pri responzívnom dizajne je dôležité myslieť na to, že percentá sa vždy počítajú voči rodičovskému prvku, nie voči celej obrazovke. To je rozdiel oproti jednotkám ako px alebo vw.
Ak výsledok presiahne 100 %, znamená to, že zadaný prvok je širší než jeho rodičovský kontajner. V CSS by takáto hodnota mohla spôsobiť pretekanie prvku do strany. Pri bežnom rozložení stránky preto dáva zmysel skontrolovať vstupné hodnoty alebo upraviť šírku prvku tak, aby zodpovedala dostupnému priestoru v kontajneri.
Na nadväzujúci výpočet môžete použiť Prevodník PX na percentá.
Predpoklady a obmedzenia
Referenčná šírka musí byť kladná; šírka prvku môže byť nula aj väčšia než kontajner. Nad 100 % môže prvok pretekať, náhľad sa iba vizuálne obmedzuje. Pre CSS width býva základom obsahujúci blok; padding, border a box-sizing môžu ovplyvniť skutočný rozmer. CSS zápis používa desatinnú bodku.
Zdroje a metodika
Časté otázky
Čo počíta kalkulačka šírky prvku v percentách?
Prepočíta šírku prvku v pixeloch na percentuálnu hodnotu voči šírke rodičovského kontajnera.
Ktoré údaje potrebujem na výpočet šírky prvku v percentách?
Zadáva sa šírka prvku v px a šírka rodičovského kontajnera v px.
Aký CSS zápis kalkulačka zobrazí?
Zobrazí zápis vo forme width s vypočítanou percentuálnou hodnotou, napríklad width: 25%;
Čo znamená pomer k rodičovi?
Pomer ukazuje, akú časť rodičovského kontajnera tvorí zadaná šírka prvku.
Čo ak je prvok širší než kontajner?
Výsledok bude vyšší než 100 %. V CSS môže takáto hodnota spôsobiť, že prvok bude pretekať mimo kontajnera.
