Zvětšení a zmenšení v CSS

Již v prastarých Internet Explorerech bylo možné cokoliv zvětšit nestandardní CSS vlastností zoom. V IE, Chrome a nové Opeře funguje zoom dodnes. Pro zvětšení/zmenšení se zadává buď poměr změny velikosti, nebo procenta.

.dvakrat-vetsi {
  zoom: 2;
  /* totéž jako */
  zoom: 200%;
}

Živá ukázka

CSS vlastnost zoom funguje v podstatě stejně, jako by se danému elementu zvětšily nebo zmenšily rozměry, písmo a podobně.

Vlastností zoom upravený element tak ovlivní i své okolí.

Transformace scale

Modernější a podporovaný i ve Firefoxu je způsob změny velikosti pomocí CSS transformace scale. Element upravený transformací neovlivňuje své okolí, což činí úpravy méně náročné na výpočetní výkon (nemusí se přepočítávat umístění okolí).

Z neovlivňování okolí plyne fakt, že zvětšený element bude okolí překrývat.

Zápis

.dvakrat-vetsi {
  transform: scale(2);
}

Funkce scale může element zvětšovat zvlášť ve směru vodorovném a zvlášť ve směru svislém při zadání dvou parametrů.

.dvakrat-sirsi-ctyrikrat-vyssi {
  transform: scale(2, 4);
}

Pro změnu velikosti pouze v ose X nebo ose Y existují ještě funkce:

• scaleX()
• scaleY()

.dvakrat-sirsi-ctyrikrat-vyssi {
  transform: scaleX(2) scaleY(4);
}

Hezké na změně velikosti pomocí tranform: scale je možnost animace pomocí transition. Stačí přidat jeden řádek (plus případné vlastnosti s CSS prefixy) a změny velikosti jsou plynulé.

element {
  transition: 5.s transform;
}

Podpora v prohlížečích

Transformace pro zvětšení nebo zmenšení fungují od:

• IE 9,
• Chrome 4,
• Opera 11.5,
• Firefox 3.5,
• Safari 3.1

Pro podporu i ve starších prohlížečích se používají CSS prefixy:

.zvetseny {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

Využití

Transformace scale se asi nejvíc hodí pro animované efekty.

Plynulé zobrazení přes celou obrazovku

Po kliknutí na tlačítko se přes celou obrazovku plynule zobrazí obsah.

Náhled webu

Zmenšením webu v <iframe> jde vytvořit okamžitý náhled webu.

URL: Načíst

Není to ale úplně ideální řešení, protože:

• stránka může blokovat zobrazení v rámu,
• celý obsah stránky se bude muset stáhnout, což bude poměrně datově náročné

Náhled webu se dá snadno získat i jako obrázek:

Pomocí zvětšování/zmenšování jde docílit i různých pěkných efektů.