Zvětšení obrázku v CSS Vyřešeno
Zvětšení obrázku v CSS Vyřešeno
Zdravím. Jsem začátečník a dělám si www stránky a napadlo mě že bych přidal jednu maličkost, a to zvětšení 'zoom' obrázku. Představuji si to tak že po najetí kurzoru myši na obrázek se trochu zvětší aby byl lépe vidět. Našel jsem jeden kód ale nefungoval mi, nevíte jak na to? Díky za rady
Re: Zvětšení obrázku v CSS
#obr{
width: 100px;
height: 100px;
}
#obr:hover{
width: 120%;
height: 120%;
}
mělo by to fungovat, 1. je normální přednastavení velikosti obrázku. do toho druhýho (hover) zapíšeš velikosti obrázku v tu chvílí když je na něm myš.
u tohodle je ale meší problém si pamatuji že se zvětší ale jakoby od zhora a zleva. ne z prostředka, na to je http://www.w3schools.com/css3/css3_2dtransforms.asp
scale
width: 100px;
height: 100px;
}
#obr:hover{
width: 120%;
height: 120%;
}
mělo by to fungovat, 1. je normální přednastavení velikosti obrázku. do toho druhýho (hover) zapíšeš velikosti obrázku v tu chvílí když je na něm myš.
u tohodle je ale meší problém si pamatuji že se zvětší ale jakoby od zhora a zleva. ne z prostředka, na to je http://www.w3schools.com/css3/css3_2dtransforms.asp
scale
ello dere
Re: Zvětšení obrázku v CSS
No jo, jenže ten tvůj obrázek se bude opakovat do 120%, leda no-repeat..
Ale zkus třeba padding...
Ale zkus třeba padding...
Vtípek
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
-
CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: Zvětšení obrázku v CSS
udělej to přes background size nebo druhej obrázek
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
Re: Zvětšení obrázku v CSS
a jo, místo procent maj bejt px
padding je u toho zbytečně "komplikovanej", tak před půl rokem sem si s tim hodně hrál a nejlepší je hover + transform-scale
padding je u toho zbytečně "komplikovanej", tak před půl rokem sem si s tim hodně hrál a nejlepší je hover + transform-scale
ello dere
Re: Zvětšení obrázku v CSS
honzaik píše:#obr{
width: 100px;
height: 100px;
}
#obr:hover{
width: 120%;
height: 120%;
}
mělo by to fungovat, 1. je normální přednastavení velikosti obrázku. do toho druhýho (hover) zapíšeš velikosti obrázku v tu chvílí když je na něm myš.
u tohodle je ale meší problém si pamatuji že se zvětší ale jakoby od zhora a zleva. ne z prostředka, na to je http://www.w3schools.com/css3/css3_2dtransforms.asp
scale
když mám ten obrázek nahrajen přes html ?
<center><img src="nazev.jpg" width="300px" height="150px">
Re: Zvětšení obrázku v CSS
Přes html to můžeš udělat taky, ale klidě zkus ten padding..
Jo a nevím v čem je ten padding komplikovanej xD, rozhodně to pro ni bude pochopitelnější než skok na scale z CSS3..
Jo a nevím v čem je ten padding komplikovanej xD, rozhodně to pro ni bude pochopitelnější než skok na scale z CSS3..
Vtípek
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
Re: Zvětšení obrázku v CSS
no jako nevim jak ten padding myslíš ale při každý změně velikostzi obrázku musíš i upravit padding atd.
a udělej to spíš vše v css, je to jednodušší
a udělej to spíš vše v css, je to jednodušší
ello dere
Re: Zvětšení obrázku v CSS
a musím mít ten obrázek nahranej v boxu přes css nebo jak ? ten tvůj kód mě nefungoval nevím proč .. když dám obrázek do boxu přes css a umístím to přesne přes margin-left a top a pak to nahraju na stránky tak není na tom místě kde má být ..
Re: Zvětšení obrázku v CSS
prostě když budeš mít
tak by to mělo fungovat a bejt vycentrovanej
on někdy <center> dělá problémy, už je zastaralej
Kód: Vybrat vše
<html>
<head>
<style>
#obr{
width: 200px;
height: 100px;
left: 50%;
margin-left: -100px;
}
#obr:hover{
width: 250px;
height: 150px;
margin-left: -125px;
}
</style>
</head>
<body>
<div>
<img src="obr.png" id="obr"/>
</div>
</body>
</html>tak by to mělo fungovat a bejt vycentrovanej
on někdy <center> dělá problémy, už je zastaralej
ello dere
Re: Zvětšení obrázku v CSS
honzaiku: Mohl by jsi mi vysvětlil v čem je ten padding složitější, nuže tady je kod... a jakými způsoby ten padding můžu myslet.. ?
Kód: Vybrat vše
#obr{width: 200px;height: 200px;background: url('cestakobrazku');}
#obr:hover{padding: 50px;}Vtípek
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
Alenka v říši divů : <div> <div><div><div><div>ALENKA</div> </div> </div> </div></div>
-
CZechBoY
- Master Level 9.5
- Příspěvky: 8813
- Registrován: srpen 08
- Bydliště: Brno
- Pohlaví:
- Stav:
Offline
- Kontakt:
Re: Zvětšení obrázku v CSS
padding ti nic neudělá, jen roztáhne box => budeš vidět větší část obrázku
udělej to přes ten background-size nebo přes javascript - při kliknutí se otevře "okno" (např. fancybox)
udělej to přes ten background-size nebo přes javascript - při kliknutí se otevře "okno" (např. fancybox)
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW
-
- Mohlo by vás zajímat
- Odpovědi
- Zobrazení
- Poslední příspěvek
-
-
Problémy v síti na obrázku - proč nemůžou počítače komunikovat mezi sebou Příloha(y)
od zuzana3 » 25 pro 2024 20:33 » v Administrace sítě - 7
- 4838
-
od zuzana3
Zobrazit poslední příspěvek
25 pro 2024 22:23
-
Zpět na “Programování a tvorba webu”
Kdo je online
Uživatelé prohlížející si toto fórum: Seznam[Bot] a 9 hostů