Forsiden » Showcase » Demoside

Fleksible billedstørrelser

Gør browservinduet større og mindre og se, hvorledes billedet også bliver større og mindre.

Gør browservinduet større og mindre og se billedstørrelsen følge med.

Gør browservinduet større og mindre og se billedstørrelsen følge med.

Det har luret i baghovedet et stykke tid, men i dag fik jeg lyst til at prøve, om man kan lave elastiske billeder. Det er implicit i W3C's standarder, og jeg har også en gang set det beskrevet på W3C's hjemmeside, i sektionen for
CSS Tips and Tricks, eksemplet Figures & Captions

Billedet er et jpg-billede, der er 276 pixel gange 185 pixel. Tyngden er knap 9 kilobyte.

Billedet tåler kun dårligt at blive sat op til den størrelse det får, hvis browservinduet maksimeres på en 1280 gange 1024 skærm. Et middel mod det er at bruge max-width-egenskaben, der i dette eksempel er sat til 300 pixel.

Internet Explorer forstår ikke max-width-egenskaben, og vil derfor øge billedstørrelsen, så billedet hele tiden er ca. 35 procent af browservinduets størrelse.

Tricket består i at undlade at sætte width og height på billedet vha. img-markøren – noget vi ellers har lært, vi altid skal gøre. I stedet sætter vi billedets dimensioner ved hjælp af en formdeklaration for det aktuelle billede, i dette tilfælde:

div#pix {
  float: right;
  width: 35%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  max-width:320px;
}

Som du ser er billedets bredde sat til 35 procent af det overordnede elements bredde, i dette tilfælde div#indhold, der stort set svarer til browservinduets bredde.

Øges eller mindskes browservinduets bredde øge eller mindskes billedets bredde i takt hermed, og eftersom der ikke er sat nogen højde på billedet, vil denne øges eller mindskes proportionalt med bredden.

Forsynes billedet med en absolut højde i pixel, vil kun bredden ændrer sig i takt med browservinduets bredde.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.

Jørgen Farum Jensen, oktober 2004

XHTML og CSS checked ok 6/10-04.