| Autor | Zpráva | ||
|---|---|---|---|
| Luke9 Profil |
#1 · Zasláno: 17. 9. 2013, 19:50:35
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 |
#2 · Zasláno: 17. 9. 2013, 19:53:46
Co tomu obrázku dát
max-width: 440px;?
|
||
| Luke9 Profil |
#3 · Zasláno: 17. 9. 2013, 19:55:59
nemeja:
to jsem zkoušel, ale obrázek se zdeformuje... |
||
| Trejpa Profil |
#4 · Zasláno: 17. 9. 2013, 19:57:11
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 |
#5 · Zasláno: 17. 9. 2013, 19:59:33
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 |
#7 · Zasláno: 17. 9. 2013, 20:04:25
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 |
#8 · Zasláno: 17. 9. 2013, 20:26:48
Luke9:
„to jsem zkoušel, ale obrázek se zdeformuje...“ Není pravda, max-width zachovává poměry :) |
||
| Trejpa Profil |
#9 · Zasláno: 17. 9. 2013, 20:41:03
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 |
#10 · Zasláno: 17. 9. 2013, 20:58:25
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 |
#11 · Zasláno: 18. 9. 2013, 07:44:06
"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 |
#12 · Zasláno: 18. 9. 2013, 15:51:14
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 |
#13 · Zasláno: 19. 9. 2013, 12:51:03
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 * |
#14 · Zasláno: 19. 9. 2013, 12:57:08
peta:
„vyska divu se automaticky nezortahuje“ Výška se přizpůsobí obsahu, to je standardní chování. |
||
|
Časová prodleva: 11 let
|
|||
0