Voor een website in wording wil ik een afbeelding tonen. De site is voor een grafisch ontwerper en hij wil een illustratie tonen totdat de site helemaal af is. Het is de bedoeling dat deze afbeelding de gehele browserwindow vult.

Liefst maak ik het zo dat de achtergrond afbeelding meeschaalt met het vergroten/verkleinen van de window, maar het is een pixel en geen vector afbeelding.

Mijn vraag is welke technieken er zijn om toch een mooi resultaat te bereiken. Moet hij mogelijk meerdere afbeeldingen maken en een script draaien die de resolutie van de pc afleest om de beste afbeelding te tonen? (dan zit je nog met de browser, hoeveel ruimte neemt een toolbar in e.d.).

Kortom, kan iemand me adviseren? ik kan me haast niet voorstellen dat hier niet al hele slimme dingen voor bedacht zijn.

alvast bedankt

(Bewerkt door Daniel AMS om 13:46, 14-05-2007)

Het is met Flash te doen, en zo te zien ook met CSS:
http://www.smileycat.com/miaow/archives/000648.php

Even Googlen levert je in ieder geval bergen opties op

joram,
Bedankt. Had flink gegoogled maar niets concreets tegen gekomen. (wel erg veel) Dacht ik ga putten uit de kennis van mensen die het vaker doen, dat scheelt tijd.

Bedankt voor je link. Mochten er nog mensen zijn die op dit gebied het ei van columbus denken te hebben, hoor ik het graag.

bedankt

Ik heb voor mijn projectje www.treintjesopzolder.nl een plaatje dat in ieder geval vertikaal uitvult, heb het nog niet getest of dit ook meteen horizontaal ook werkt. Ik denk het wel. HTML + CSS hieronder:

HTML:


<div id="flyer">
<img src="images/flyer.gif" border="0" height="100%">
</div>


CSS:


html, body {
height: 100%;
width: 100%;
overflow: auto;
text-align: center;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #9E9C9D;
}

#flyer {
position: absolute;
top: 0px;
left: 0px;
visibility: show;
float: left;
background-color: #9E9C9D;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
height:100%;
}


Leendert, exact wat ik zocht. Dank!

Aansluitend op de code van Leendert (en weer geen goed antwoord gevonden met google):

Monitoren varieren enorm van afmeting (er zijn maar weinig mensen met een mooie 30-inch Apple cinema display, maar ze zijn er wel), daarom wil ik het volgende bereiken:

ik wil de code van Leendert gebruiken om een afbeelding van een niet al te breede afbeelding (1440x***, niet meest gangbare, maar ook niet overdreven groot) te verkleinen naar het formaat van de browser van een bezoeker.
Daarnaast wil ik een script opnemen die, in geval een bezoeker een resolutie heeft die meer is dan 1440x***, zijn browser (inner window) wordt teruggebracht naar 1440x***.

Weet iemand een dergelijk script te vinden op het internet.

Dus:
als resolutie hoger dan 1440x***, dan resize window naar 1440x***.

Kun je niet een plaatja maken met een groote van 1024px ofzo, en die dan met photoshop mooi laten uitfaden in een passende kleur totdat het canvas zo groot is als een 30"inch scherm (ken de resolutie daarvan niet). Dan kun je met behulp van CSS dat plaatje in het midden centreren, en zodra  iemand met een groot scherm kijkt krijgt hij/zij een mooi alternatief. Niet moeilijk en snel gemaakt voor een tijdelijk iets.

Wat ook kan is een plaatje in Flash stoppen, dat heeft uit zichzelf de mogelijkheid om schermvullend te zijn.