Citlivé obrazy snadno a rychle s ResponsifyJS

Moderní web by měl být 100% citlivý a novější knihovny to činí stále více možným.

S volnými pluginy, jako je ResponsifyJS, Je ještě snazší, aby vaše webové stránky fungovaly na všech zařízeních. Tento bezplatný plugin jQuery bere kontejner obrázků a dynamicky přeskupuje založené na různých velikostech obrazovky.

Protože různé nádoby držet obrázky jinak, mohou měnit velikost ve zvláštních způsobech. Někdy budete mít fotky lidí a jejich tváře mohou být při změně velikosti na mobilu odříznuty.

Byl vytvořen plugin Responsify, který tento problém vyřeší. To může fungovat automaticky, ale skutečná magie leží v definování vlastního zaostřovacího pole na obrázku.

Používá interního systému desetinných popisů najít, kde by mělo být zaměření obrazu. Můžete například definovat pozice jako data-focus-top který “bloků” určitý segment obrázku.

Tato data je třeba předat ve formě desetinných míst, například .5 desetinných cílů 50% obrazu (vlevo / vpravo nebo nahoru / dolů). Samozřejmě, to je docela matoucí udělat sami. Ale je tu bezplatná aplikace Responsify , která vám umožní dynamicky vypočítat polohy ve vašem prohlížeči.

Stačí nahrát obrázek, definovat zaostřovací pole a zkopírovat / vložit kód obrázku na vaše webové stránky. Plugin Responsify bude mít všechna data, která potřebuje k řádnému změně velikosti obrazu na menších obrazovkách.

Můžete najít poměrně málo živé demo odkazy v repozitáři GitHub, včetně útržků kódu pro kopírování / vkládání na vaše stránky.

Tento plugin není ideálním řešením pro každý projekt. Někdy, vy chtít velikosti obrazu bez pevných zaostřovacích oblastí. Ale pokud používáte zednické mřížky s jQuery to nebolí přidat ResponsifyJS do vašeho zásobníku.

Chcete-li se dozvědět více, navštivte domovskou stránku pluginu pro živou ukázku, odkaz ke stažení a úplný průvodce nastavením.