Oříznutí fotek pomocí CSS ^Doporučený

Změna velikosti fotek, oříznutí fotek .. toto je úkol, který řeším skoro u každého projektu. Grafik navrhne velikost fotek, ale uživatelé většinou fotky nahrávají bez jakýchkoliv úprav, v nejhorším případě přímo s fotoaparátu.

Změna velikosti fotografií

Dlouhodobě jsem řešil samostatným php scriptem, který sám tvořil náhledy. Jednoduché, rychlé .. prakticky nejvhodnější řešení. Stále toto řešení používám, ale již před pár lety jsem začal používat googlovské řešení - pagespeed pro server. Prvně jsem toto použil již v beta verzi. Velice opatrně - přece jen to byla beta a kdo ví, co by se mohlo stát. Naštěstí nic a nic nebránilo nasazení na více webů.

Google PageSpeed

Google pagespeed neřeší pouze generování náhledů - umí toho velmi moc a pokud jej neznáte, doporučuji se na něj detailně projít. Umí toho opravdu hodně, namátkou vyberu to nejdůležitější:

• Inline Preview Images
  Právě tato funkcionalita se stará o tvorbu náhledu obrázků na webu. Hlavní výhodou je, že náhledy se tvoří dynamicky pro různá zobrazení - pokud tedy tvoříte responsible design, je tato funkcionalita prakticky nutnost.
• Combine CSS
  Jak již název sám napovídá, toto nastavení spojí více CSS souborů do jednoho
• Combine JavaScript
  Stejně jako spojování CSS, tak toto spojuje veškeré javascripty
• Collapse Whitespace
  Odstraní nadbytečné mezery z kódu. Minimalizuje tím velikost stránky.
• Optimize Images
  Zoptimalizuje velikost obrázků.
• Pre-Resolve DNS
  Načte dopředu DNS záznamy.
• a mnoho dalších

Oříznutí fotek

Oříznout fotky šlo i v PHP, ale nikdy mi to řešení nepřišlo ideální. A při větším množství fotek na stránce i časově náročnější. Hledal jsem proto nějaké "čistější" řešení a nejlépe čisté css.

Po chvíli pokusů a testování bylo řešení na světě a velimi jednoduché. Spočívá ve vytvoření rámečku, do kterého se musí foto vejít, zbytek se pak "skryje".

HTML kód

<div class="crop">
<img src="/foto.jpg" alt="" />
</div>

CSS kód

.crop {
    width: 100%;
    height: 130px;
    overflow: hidden;
}

Jak vidíte, velice jednoduchý a efektivní zápis. Můžete namítnout, že nevýhodou je nezměněná velikost fotky. Máte pravdu, ale právě díky googlovskému pagespeed toto řešit nemusím a právě proto jsem první část tohoto článku věnoval této technologii a samotné řešení oříznutí textu je na pár řádků.