Responzivní fotogalerie rubrika: Kódování: CSS
8
v6ak
Řeším, jak vhodně udělat reponzivní fotogalerii. Situace:
- Pokud zvětším okno, mělo by se to rozumně roztáhnout, případně by se mělo zvětšit počet fotek na řádek. Řeší gridy v Bootstrapu a .img-responsive.
- Mám zvolený poměr stran pro thumbnail.
- Thumbnail se nemá ořezávat, ale radši použít menší thumbnail a udělat prázdné místo okolo něj.
Je jasné, že všechny náhledy musejí mít ve výsledku stejnou výšku i šířku (třeba za cenu prázdného místa), jinak z toho float: left může snadno udělat guláš. Jak to řešit? Napadají mě tři řešení:
a) Přímo do obrázku vložit bílé místo. Zatím to jde, protože stránka má bílé pozadí, ale je jasné, že s tímto přístupem lze snadno narazit. Průhlednost by to sice řešila, ale musel bych použít jiný formát, čímž by se zvýšila datová náročnost.
b) Nastavit tomu obrázku třeba width: 80% (pro každý poměr stran by byla jiná hodnota), čímž bych vyrobil prostor okolo. Teoreticky mi to přijde čistější a nejspíš by to v 99% případů fungovalo dobře. Jenže se obávám, že by občas došlo k nějaké zaokrouhlovací chybě a jeden obrázek by byl vyšší třeba o 1px, což by opět nadělalo guláš. Ale blbě by se to ladilo, protože chyba by se vyskytovala pouze u obrázku s "vhodným" rozměrem v kombinaci s nějakým rozlišením displeje apod. Kdybych dostal takovýto problém nahlášený, dost možná bych ho nebyl schopen vůbec reprodukovat.
c) Počítat rozměry javascriptem, vždy nastavit maximální výšku. No fuj.
8
v6ak
Tak jsem to vyřešil jinak.
Poměr stran jsem zanesl přímo do CSS. Inspiroval jsem se tímto trikem: http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Potom jsem nechal obrázky vyplnit celý obsah. Použil jsem max-width: 100% a max-height: 100%. Nakonec jsem je vycentroval.
Až na načítání obrázku vhodné velikosti mi to celé funguje i bez Javascriptu. Teď ještě dořešit IE6, bude-li potřeba. To ještě uvidím.
Pro zobrazení všech 3 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem: