| Autor | Zpráva | ||
|---|---|---|---|
| medved Profil |
#1 · Zasláno: 17. 1. 2020, 22:42:49
Dobrý den,
poradíte mi,prosím, jak zjistit původní velikost obrázku, po kliknutí se zvětší na 100% a po odjetí myši chci, aby se vrátil na původní velikost, jenže ta je jiná pro portrait a jiná pro landscape. |
||
| lionel messi Profil |
medved:
Zdravím, otázka je koncipovaná dosť všeobecne, nie som si celkom istý, či chápem správne to, čo myslíš pod pojmom pôvodná veľkosť. Ak by šlo o zväčšenie obrázku pri akomkoľvek nájdení myšou (bez kliknutia), riešil by som to zrejme v čistom CSS, napr. pomocou selektoru :hover. Ak chceš pri nájdení myšou zobraziť obrázok vo veľkosti, v akej bol nahraný na server, nastav mu width: auto namiesto 100%. Odporúčam v CSS zadávať vždy len jeden rozmer obrázka.
Živá ukázka Tvojmu zadaniu sa podobá niečo takéto: Živá ukázka |
||
| lionel messi Profil |
Pozerám, že môj kód z [#2] nie je ktoviečo — ak kliknem na už zväčšený obrázok, zmenší sa. Ak odídem myšou z nezväčšeného obrázku, zväčší sa. To medved evidentne nechce. Takto to vyzerá, keď programujem vtedy, keď by som nemal… Ospravedlňujem sa za nekvalitnú prácu.
Lepší kód, ktorý rieši oba nedostatky. |
||
|
Časová prodleva: 4 dny
|
|||
| medved Profil |
#4 · Zasláno: 23. 1. 2020, 19:13:37
Nooo, já na to šel takto:
<style type="text/css">
@media (orientation:landscape){#obr {width:40%;}}
@media (orientation:portrait){#obr {width:80%;}}
</style>
.
.
.
<img id="obr" src="obrazek.png" onclick=this.style.width="100%" onmouseout=this.style.width="?nevim?">Líbilo by se mi, kdyby šlo v nastavení media orientation uložit šířku obr. do proměnné a tu pak použít v onmouseout |
||
| Kajman Profil |
#5 · Zasláno: 23. 1. 2020, 20:10:04
Mělo by stačit nastavit prázdnou hodnotu. Můžete ji nastavit i onclickem, pokud už tam je 100% z minula, aby to šlo na mobilu kliknutím i zmenšit.
<img id="obr" src="obrazek.png" onclick="this.style.width=(this.style.width=='100%'?'':'100%')" onmouseout="this.style.width=''"> |
||
| medved Profil |
#6 · Zasláno: 23. 1. 2020, 21:11:53
Kajman:
Tak to je mazec, nechápu proč, ale funguje to parádně. Díky |
||
| Keeehi Profil |
#7 · Zasláno: 24. 1. 2020, 15:07:58
medved:
Protože tím javascriptem menší inline styl toho elementu. Ten mívá většinou přednost, před tím css ve style tagu. Takže se obrázek zvětší. To že mu pak nastavíš prázdnou hodnotu ten inline styl jakoby zruší, takže se opět aplikuje pravidlo z toho css v tagu style které se k tomu samozřejmě řídí i podle media query podmínky. |
||
|
Časová prodleva: 4 roky
|
|||
0