Autor Zpráva
misso132
Profil
zdravím, mám takýto jednoduchý kód:
  <body style="height: 100%; width:100%; text-align:center;">
  <img src="obr.png" style="max-width:100%; max-height:100%;">
  </body>
a potreboval by som, aby to ten obrázok zarovnalo vertikálne aj horizontálne pri zmene veľkosti okna
horizontálne to už je, ale nedarí sa mi dorobiť to vertikálne.
neviete mi poradiť?
MyShare
Profil
Vertical-align
margin
Profil *
MyShare:
V článku se píše, že vlastnost vertical-align se dá použít pouze v několika málo případech, ale jak vertical-align použít v tomto případě, nechápu. Možné je stránku ztabulkoval v HTML nebo v CSS.
MyShare
Profil
margin:
Aaaa sakra ja som to odoslal?
Najprv som to chcel poslať ale potom som si uvedomil, že by som mu odoslal blbosť keďže som to lepšie prečítal SORRY misso132
Plaváček
Profil
misso132:

Použij tabulku.
misso132
Profil
[#4] MyShare
v poho, viem že je to hlúposť, to som už skúšal :-D


k tej tabuľke: nad tým som rozmýšľal, ale nenapadá mi ako ju nastylovať aby udržala obrázok vždy v strede aj pri zmenách veľkosti okna...
jenikkozak
Profil
Tabulku necháš přes celou plochu okna (výška a šířka na 100 %, pozice absolutní, u prvku <body> vynulovaný margin), obrázek umístíš na střed právě pomocí vertical-align.
Trejpa
Profil
misso132:
Žádnou pozici nepotřebuješ.

<style>
html, body, table { width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; } 
td { vertical-align: middle; }
</style>

<table><tr><td><img src=obrazek.png></table>
margin
Profil *
Místo TD bych použil TH, pal se obejdu bez text-align: center; protože je to výchozí zarovnání buněk záhlaví
vertical-align: middle; je výchozí zarovnání všech buněk, není nutné explicitně deklarovat.
misso132
Profil
[#8] Trejpa
díík
toto riešenie to pekne vycentruje, ale obrázok stratí schopnosť prispôsobiť sa oknu pri zmenšení/zväčšení okna :-(
Plaváček
Profil
misso132:

Obrázku můžeš nastavit šířku a výšku (width, height) 100%. Pak se přizpůsobí. Ale nebude to asi moc hezké.
margin
Profil *
Tenhle styl používá Firefox při prohlížení obrázků:
img {
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}
Pokud přidáš max-width:100%; max-height:100%; tak se bude maximální velikost obrázku přizpůsobovat oknu, ukázka.
Netestoval jsem, nakolik je to funkční v jiných prohlížecích a nyní se mi to testovat nechce.
misso132
Profil
[#12] margin
dííík, toto funguje skvele

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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