Mulla on yksi sivu, jonka rakenne koostuu frameista (=kehyksistä). Yhdessä frameista on html-dokunetti johon on ladattuna jpg-valokuva. Käyttäjillä on aina hieman poikkeavia resoluutioita käytössä näytöissään (1280x1024 / 1152x864 / 1024x768). Miten saisin html-dokumentissa olevan kuvan venymään framen kokoiseksi näytön reoluutiosta huolimatta.
Nyt tilanne on se, että jos laitan sen kuvan pixelikoon sopivaksi resoluution ollessa 1280x1024, niin käyttäjälle jolla on käytössä resoluutio 1024x768, ilmestyy vierityspalkit siihen frameen. Tiedän kyllä että IE6 näyttää todella surkeasti skaalautuvan valokuvan tarkkuuden, mutta haluaisin siitäkin huolimatta toteuttaa tämän kertomallani tavalla.
Eli vielä tiivistäen: haluan kuvan skaalautuvan kyseisen framen kokoiseksi näyttölaitteen resoluutiosta riippumatta. Ja siis muistutuksena, että siihen frameen ei ladata suoraan sitä kuvaa, vaan frameen ladataan html-dokumentti, jossa on kuva.
Olen laittanut css-tiedostoon seuraavanlaisia käskyjä:
-----------------------------
body {
background-color: #66CDAA;
}
table.Ulkokehys {
height: 100%;
width: 100%;
}
table.Kuvataulukko {
height: 99%;
width: 99%;
img.LadattavaKuva {
display: block;
height: 99%;
width: 99%;
}
----------------------------
Tuo ladattavan kuvan korkeus (=height) kyllä onnistuikin, mutta en saa kuvan leveyttä oikeanlaiseksi... Kun asetan "height: 99%;" -käskyn, niin oikeaan reunaan ilmestyy kuvan viereen silmämääräisesti 4 cm:n tyhjä/tarpeeton marginaali! Jos taas laitan "width: 50%;" -käskyn, niin kuvaa kavennetaan 50%, ja sehän riippuu kuvan alkuperäisestä koosta, paljonko on 50% kuvan leveydestä...
Nyt tilanne on se, että jos laitan sen kuvan pixelikoon sopivaksi resoluution ollessa 1280x1024, niin käyttäjälle jolla on käytössä resoluutio 1024x768, ilmestyy vierityspalkit siihen frameen. Tiedän kyllä että IE6 näyttää todella surkeasti skaalautuvan valokuvan tarkkuuden, mutta haluaisin siitäkin huolimatta toteuttaa tämän kertomallani tavalla.
Eli vielä tiivistäen: haluan kuvan skaalautuvan kyseisen framen kokoiseksi näyttölaitteen resoluutiosta riippumatta. Ja siis muistutuksena, että siihen frameen ei ladata suoraan sitä kuvaa, vaan frameen ladataan html-dokumentti, jossa on kuva.
Olen laittanut css-tiedostoon seuraavanlaisia käskyjä:
-----------------------------
body {
background-color: #66CDAA;
}
table.Ulkokehys {
height: 100%;
width: 100%;
}
table.Kuvataulukko {
height: 99%;
width: 99%;
img.LadattavaKuva {
display: block;
height: 99%;
width: 99%;
}
----------------------------
Tuo ladattavan kuvan korkeus (=height) kyllä onnistuikin, mutta en saa kuvan leveyttä oikeanlaiseksi... Kun asetan "height: 99%;" -käskyn, niin oikeaan reunaan ilmestyy kuvan viereen silmämääräisesti 4 cm:n tyhjä/tarpeeton marginaali! Jos taas laitan "width: 50%;" -käskyn, niin kuvaa kavennetaan 50%, ja sehän riippuu kuvan alkuperäisestä koosta, paljonko on 50% kuvan leveydestä...
Vastaukset 2
Vanhimmat
Taas yksi syy olla käyttämättä frameja...
Taas yksi syy olla yrittämättä 'hienouksia'....
Satoja miljoonia kertoja testattu ja toimivaksi havaittu:
tai n* ja siihen lätkitään thumbit tyyliin:
a) Yksinkertainen tehdä
b) Toimintavarma
c) Helppo käyttää
d) MUKAVA käyttää
e) Kuvat näkyvät - ei kehykset, ei framehässäkät, eikä muukaan turha tilpehööri.
jne, jne.
Mutta kukin tavallaan...
.skaalaus {
height: 100%;
width: 100%;
}
Tosin kuvan skaalautumisessa ei ole mitään järkeä, ennemmin pikkukuva ja sitten alle linkit josta saa valita vaikkapa kolmesta erikoosta sopivan.