---

Jeg har fundet en side,
http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm,
som anviser en metode til at lave skalérbare billeder med css.

I korte træk går det ud på, at man undlader at angive width og height i
img-tag'et, men i stedet sætter højde og bredde via css, hvor man kan
bruge em som måleenhed.

Det ser alt sammen meget fint ud, men metoden forudsætter, at man kan
regne sig frem til, hvor mange em der går på et givent antal px, men
det. Eksemplerne på siden ser ud til at gå ud fra, at 1 em er lig med 16
px, men er det en pålidelig omregningsfaktor?

Mikkel

--
"At first just a rustle of canvas
And the gentlest breath on my face
But a galloping line of white horses
Said that soon we were in for a race"
Sting - The Wild Wild Sea

www.mzh.dk

---

Mikkel Z. Herold wrote in dk.edb.internet.webdesign.html:
> Jeg har fundet en side,
> http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm,
> som anviser en metode til at lave skalérbare billeder med css.
>
> I korte træk går det ud på, at man undlader at angive width og height i
> img-tag'et, men i stedet sætter højde og bredde via css, hvor man kan
> bruge em som måleenhed.
>
> Det ser alt sammen meget fint ud, men metoden forudsætter, at man kan
> regne sig frem til, hvor mange em der går på et givent antal px, men
> det. Eksemplerne på siden ser ud til at gå ud fra, at 1 em er lig med 16
> px, men er det en pålidelig omregningsfaktor?
>
> Mikkel
>
> --
> "At first just a rustle of canvas
> And the gentlest breath on my face
> But a galloping line of white horses
> Said that soon we were in for a race"
> Sting - The Wild Wild Sea
>
> www.mzh.dk

Fra MS dokumentation:
----
Relative length units
em The computed font-size.
ex The height of a lowercase "x".
px Pixels, relative to the viewing device.
% Percentage.
Absolute length units
in Inches (1 inch = 2.54 centimeters).
cm Centimeters.
mm Millimeters.
pt Points (1 point = 1/72 inches).
pc Picas (1 pica = 12 points).

The 'em' unit is relative to the computed value of the font-size attribute
of the element. When 'em' occurs in the value of font-size itself, it
refers to the font size of the parent element. It can used in both vertical
and horizontal measurements.
---
Hvad er problemet ved at regne i px?

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Mikkel Z. Herold skrev:
> Jeg har fundet en side,
> http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm,
> som anviser en metode til at lave skalérbare billeder med css.
>
> I korte træk går det ud på, at man undlader at angive width og height i
> img-tag'et, men i stedet sætter højde og bredde via css, hvor man kan
> bruge em som måleenhed.
>
> Det ser alt sammen meget fint ud, men metoden forudsætter, at man kan
> regne sig frem til, hvor mange em der går på et givent antal px, men
> det. Eksemplerne på siden ser ud til at gå ud fra, at 1 em er lig med 16
> px, men er det en pålidelig omregningsfaktor?

Nej. Kort fortalt er 1 em = 16 pixel, når
browserens tekststørrelsesværktøj er sat
til medium (normal).

Men hvis skalerbarheden skal være i forhold
til netop tekststørrelsesværtøjets indstilling,
det vil sige - større tekst, større billede,
så er det jo helt fint at omregne på basis af
normalforholdet.

Hvis det er skalering i forhold til browservinduets
størrelse, har jeg skrevet lidt om det:

http://webdesign101.dk/showcase/bill/index.html

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

> Nej. Kort fortalt er 1 em = 16 pixel, når
> browserens tekststørrelsesværktøj er sat
> til medium (normal).
>
> Hvis det er skalering i forhold til browservinduets
> størrelse, har jeg skrevet lidt om det:
>
> http://webdesign101.dk/showcase/bill/index.html
>
> --
>
> Med venlig hilsen
> Jørgen Farum Jensen


"Størrelsen" af en em ændrer sig med den font og fontstørrelse der er
defineret eller arvet for elementet.
Der er ikke som for pt eller pc en defineret værdi man kan gå ud fra.

IE7 forstår i øvrigt glimrende max-width, og det virker også på Jørgens
side..

Birger

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Birger Sørensen skrev:

> "Størrelsen" af en em ændrer sig med den font og fontstørrelse der er
> defineret eller arvet for elementet.
> Der er ikke som for pt eller pc en defineret værdi man kan gå ud fra.

Det er rigtigt, at hvis du definerer en skriftstørrelse
på for eksempel 14 pixel for et element, så er
1 em = 14 pixel.
Det gælder, uanset hvilken skrifttype (font), der er tale om.
Det, der kan snyde øjet her er skrifternes forskellige
egentlige højde i forhold til em-boksen - times fylder
ikke sin em-boks ud nær så godt som for eksempel
verdana.

Se herom min testside:
http://webdesign101.dk/design/eksempler/eksempel_13.php

Og der /er/ en defineret værdi for 1 em, endda en
som de fleste browsere overholder, nemlig at
1 em = 16 pixel = font-size:medium;
Se mere herom i kapitel 8 i "Webdesign med stylesheets"


> IE7 forstår i øvrigt glimrende max-width, og det virker også på Jørgens
> side..


Right, men IE 7 lå noget ude i fremtiden da jeg lavede
den side, så derfor forbeholdet.
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..