Autor Zpráva
Luke9
Profil
Ahoj,

zdravím všechny, mám menší problém s mou fotogalerii zboží. Link je zde: http://www.marygate.cz/beta/product/zlaty-prstynek Tady je vše v pořádku, protože všechny fotky jsou buď na výšku nebo mají poměr stran 4:3. Problém nadchází zde: http://www.marygate.cz/beta/product/nejdrazsi-predmet kdy jsou obrázky více širokoúhlé a poté se tedy překrývá detail obrázku s výběrem.

Tak bych byl vděčný za jakoukoliv radu jak to vyřešit. Jestli se dá nějak pomocí css ten obrázek ořezat, aby přesně seděl do toho detailu nebo jestli by bylo možné obrázek zmenšit, aby tam pasoval, pomocí nějakého php skriptu... Nevím, jak to vyřešit.

Pro zhotovení galerie byl použit pikachoose: http://www.pikachoose.com/

Díky moc za jakoukoliv radu.
nemeja
Profil
Co tomu obrázku dát max-width: 440px;?
Luke9
Profil
nemeja:
to jsem zkoušel, ale obrázek se zdeformuje...
Trejpa
Profil
Luke9:
Lze to zprava oříznout. Bloku obepínajícímu obrázek nastavíš rozměr (to už má) a ořez pomocí overflow. Obrázek v něm potom nepřeteče, ale přesah se schová.

.pika-stage { overflow: hidden; }
Luke9
Profil
Trejpa:
Paráda! Díky moc :)

Ještě taková spíš vychytávka... šlo by to udělat nějak, aby se to ořízlo jakoby z obou stran trochu, než jen zprava hodně? Pokud by byl obrázek nějak moc širokoúhlý, tak by ho to mohlo vzít dost...
Trejpa
Profil
Luke9:
šlo by to udělat nějak, aby se to ořízlo jakoby z obou stran
To bys musel znát rozměry obrázku (ideálně všechny obrázky stejně široké) a nastavit mu záporný levý margin v hodnotě [(velikost obrázku - velikost prostoru) ÷ 2]. Šlo by to zautomatizovat JavaScriptem.
Luke9
Profil
Trejpa:
Rozměry můžu zjistit pomocí getimagesize, ale teda asi bych nebyl schopný v Javascriptu něco takového sám napsat... Takže asi to udělám pouze tím overflow a dám tam ještě po rozkliknutí velkého obrázku lightbox, kde to bude vidět pořádně

Díky moc :)
nemeja
Profil
Luke9:
to jsem zkoušel, ale obrázek se zdeformuje...
Není pravda, max-width zachovává poměry :)
Trejpa
Profil
nemeja:
Není pravda, max-width zachovává poměry
…ale jen tehdy, pokud není nastavena výška. Tu však Luke9 nastavenu má. Potřebuje prostor vyplnit na výšku bez deformace šířky, proto je vhodné nastavit šířku obalujícímu bloku.
nemeja
Profil
nicméně to zas ořízne část fotky, pokud nastaví výšce max-height tak mu to bude roztahovat buď do šířky, nebo na výšku. Jde o to, co upřednostní, jestli oříznutou část fotky, nebo okraje
peta
Profil
"aby se to ořízlo jakoby z obou stran"
Pokud je to html img, tak se to da napozicovat doprostred (viz tady nekde na jpw je tusim priklad na vertikalni centrovani pomoci pozicovani).
Pokud je to css background, tak se background da napozicovat doprostred a neni treba overflow.
nemeja
Profil
peta:
Kdyby jsi se podíval na ukázku, tak uvidíš, že obrázek se roztahuje pod miniatury na straně a neni potřeba ho pozicovat doprostřed, nýbrž oříznout. Stačí se kouknout a neni potřeba tu zase vymýšlet nesmysly ;)
peta
Profil
nemeja: No, dyt jo. Kdyz udelas ramecek, napozicujes v nem vystredis img, das overflow:hidden, tak se ti orizne podle aktualni velikosti ramecku a bude vystredeny. Podminkou je jen nastavit minimalni rozmery, protoze vyska divu se automaticky nezortahuje. A nebo ten div uzavrit do jineho s pevnou vyskou.
margin
Profil *
peta:
vyska divu se automaticky nezortahuje
Výška se přizpůsobí obsahu, to je standardní chování.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: