| Autor | Zpráva | ||
|---|---|---|---|
| YOYO Profil |
#1 · Zasláno: 16. 10. 2011, 14:01:07 · Upravil/a: YOYO
Ahoj,
kamarád si udělal grafický návrh hodin a požádal mne, abych mu je rozpohyboval, což nebyl zas takový problém (ale k javasript kódu se můžete vyjádřit taky, určitě není dokonalý) viz živá ukázka, ale trápí mne trochu vzhled, mám tam nějaký takovýhle kód: <html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
margin:0px auto;
text-align: center;
background: #eee
}
canvas {
margin:1% auto;
max-height: 95%;
background: #a11 url("dial.png") no-repeat center center;
background-size: contain;
}
</style>
<script>
//script vykreslující ručičky hodin do canvasu
</script>
</head>
<body>
<canvas id=canvas width=900 height=900>
</canvas>
</body>
</html>v chrome a firefoxu se to vykresluje přesně tak jak chci, tedy: 1.) obrázek je vycentrovaný 2.) je vysoký podle velikosti okna 3.) šířka v nezměněném poměru ale v IE a opeře se ten canvas (podbarvený červeně) roztáhne, takže jsou ručičky deformované (pozadí ne, díky background-size: contain;) jak dosáhnou kýženého výsledku ve všech prohlížečích? pokud možno jen za pomoci css |
||
| bukaJ Profil |
#2 · Zasláno: 16. 10. 2011, 15:28:32
Ve stylopise máte uveden
canvas {max-height: 95%;}a ten se uplatňuje a přebíjí rozměry 900px nastavené u elementu. Zvažte, jaké použití hodin očekáváte. Každopádně je max-height podle mě zbytečný. Hodiny budete mít buď ve stránce v určeném boxu a nebo případě jejich velikost upravte javascriptem podle velikosti okna. Veřím, že by se řešení pomocí CSS našlo i pro vaše potřeby, ale to přesahuje mé schopnosti. Doufám, že jsem alespoň trochu pomohl. |
||
| YOYO Profil |
#3 · Zasláno: 16. 10. 2011, 15:38:31 · Upravil/a: YOYO
to mám úmyslně attribut height (který se ani nezadává s jednotkou px) je vnitřní rozlišení canvasu pro potřeby vykreslování/kreslení atd, to je něco jiného, než css vlastnost height, která udává zobrazovanou velikost prvku,...
max-height místo jen height mám proto, aby v případě, že je velikost body větší, než velikost obrázku, se ten nezvětšoval (nerozpixelovával),.. jde mi o to, aby byly vždy zobrazené celé hodiny a aby zabíraly co možná největší prostor a nebyly deformované problém je asi v tom, že si browsery různě vykládají width:auto (které je tam automaticky, když není nic uvedeno) |
||
| bukaJ Profil |
#4 · Zasláno: 16. 10. 2011, 15:44:23
Jasně, ale dělá to problémy.
Navrhuji při načtení stránky překontrolovat její rozměry a upravit velikost canvasu. Stejně je to na JS závislé, tak výhody CSS tu nejsou zase tak markantní. |
||
| YOYO Profil |
#5 · Zasláno: 16. 10. 2011, 21:33:27 · Upravil/a: YOYO
bukaJ, dík za návrh
Tak jsem to nakonec vyřešil tím javascriptem, dokonce se to přizpůsobuje v obou osách a ani to moc nebolelo,.. kdyby někoho zajímalo jak, tak výsledek mého dosavadního snažení najde na http://time.yo2.cz/ |
||
|
Časová prodleva: 14 let
|
|||
0