Zoom

Způsobuje vizuální zvětšení nebo zmenšení prvku. Zadává se v procentech nebo jako násobek zvětšení.

Zoom dlouho byla nestandardní, špatně podporovaná CSS vlastnost, která ale po mnoha peripetiích v prohlížečích v roce 2025 funguje dobře.

Podpora vlastnosti zoom
Prohlížeč Podpora Poznámka
Internet Explorer ano  
Firefox už ano lze nahradit zápisem transform: scale(2)
Webkit (Chrome, Safari) ano též podporuje -webkit-tranform: scale(2)

Transform: scale() a scale

Dlouhodobě se zvětšování namísto vlastnosti zoom používala spíše vlastnost vlastnost transform s hodnotou scale(násobek), protože fungovala. K vlastnosti transform: scale() také vzniklo synonymum, vlastnost scale. Transform: scale(x) a scale: x fungují identicky, akorát se jinak zadávají.

Pokud se použijí vlatnosti tranform nebo -něco-tranform, je nutno počítat s tím, že se to nechová stejně jako vlastnost zoom. Rozdíl je v tom, že transform si vyhradí místo v dokumentu a pak jenom s prvkem něco udělá. Zoom se chová očekávatelněji: prostě prvek zvětší (zmenší) a vyhradí mu i větší (menší) místo.

jak se vlastnosti chovají o okolnímu obsahu
zoom transform: scale() a scale
upraví velikost prvku a okolní obsah posune jenom zvětší / zmenší prvek a okolního obsahu si nevšímá, může ho i překrýt

Příklad

Příklad CSS vlastnosti zoom

Osobně používám zoom pouze na řešení zvětšování klikacích map v mobilním zobrazení. Můžete to vidět třeba na mém webu Kanárské ostrovy, ale musíte si tam najít CSSko.

 

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.