Auto-Resize to user's browser

[Graxeon]

I made this new website: http://www.top-media.it.tc/

 

I need to figure out how to make the image fit within all browser dimensions while still keeping the aspect ratio of whatever content I put in there (let's say 1000x1000 lowers to 100x100 if that's the size of the user's browser).

 

 

Does anyone know the code for this? I tried searching for it for an hour but can't find one

[ToonMariner]

not that easy - you could use svg (scaleable vector graphics) but I think olnly opera supports that at the mo - not checked other browsers for a bit so ff3 and safari could now support them.

 

in the current state of affairs your only option is to use some js to detect viewport size and serve out different images sized accordingly for each...

[Graxeon]

Why is this not easily done? Tables do it by using 100% on width + height...why not with images?

[Graxeon]

I tried something with DIV layers and a style code snippet but it didn't work.

 

Anyone know of a way of doing this?

[DarkWater]

I'm fairly sure that this would be completely JS.

[Graxeon]

Oh...alright.

 

Can someone move this to the JS forum, please?

[RussellReal]

<img src="whatever.jpg" id="image" />
<script type="text/javascript">
function resizeImage(image) {
vh = window.innerHeight;
vw = window.innerWidth;
if (""+vh+"" == "undefined") vh = document.documentElement.offsetHeight;
if (""+vw+"" == "undefined") vw = document.documentElement.offsetWidth;
if (image.width > image.height) {
	cRat = image.height / image.width;
	image.height = vh * cRat; 
	image.width = vw;
} else if (image.height > image.width) {
	cRat = image.width / image.height;
	image.height = vh;
	image.width = vh * cRat;			
} else {
	image.height = Math.min(vh,vw);
	image.width = Math.min(vh,vw);
}
}
resizeImage(document.getElementById("image"));
</script>

[ToonMariner]

?????

 

why do all that? if you are just going to scale the image then width="100%" would do the job.

 

if you wanted a nice un-pixelated image at different resolutions then you would have to produce and image of a size for each range of window resolution - otherwise the design will look amateurish.