Moderní tvorba webových aplikací

O webu

Jednoduchá galerie v CSS

Galerie obrázků bez JavaScriptu pomocí CSS.

3 minuty

Pro obrázkovou galerii o pár obrázcích může stačit prosté řešení čistě v HTML a CSS.

Galerie využívá obalu s nastavenou výškou a overflow: hidden, ve kterém jsou obrázky, na které lze odkázat #kotvou — v takovém případě prohlížeč odroluje na požadovaný obrázek. V novějších prohlížečích (od IE9) by šlo použít selektor :target.

Jelikož jsou všechny obrázky v plné velikosti přímo na stránce, načtou se všechny při vstupu na stránku a nemá tedy příliš smysl řešit vytváření náhledů (maximálně kvůli lepší ostrosti miniatur).

Tento postup je výhodný v tom, že při prohlížení budou všechny obrázky už načtené, nevýhoda je plýtvání daty v případě, kdy návštěvník všechny obrázky zvětšit nechce.

Pro více obrázků na jedné stránce je proto nejspíš vhodnější lightbox galerie — Magnific Popup umí dokonce řídit, kolik obrázků se má přednačítat.

Související články

Object-fit

CSS vlastnost object-fit umí přizpůsobit obrázek pevné velikosti.

4 minuty

Responsivní logo stránky

Jak vytvořit logo, které se bude přizpůsobovat velikosti stránky.

7 minut

Text v obrázku

Jak vyřešit situaci, kdy má být textový obsah v obrázku z hlediska přístupnosti, použitelnosti a SEO.

6 minut

Maximální šířka pozadí

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

2 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025