bild skalieren | Webstatt.org Community

user-180

11.06.2009 21:04

tach die herrschaften.
folgendes problem: ich will ein dass ein bild so anzeigen dass es immer das ganze browserfenster ausfüllt.
ausserdem soll es zentriert werden, wenn es größer ist als das browserfenster.
das originalbild ist 1440 * 750px groß.

ich hab das mal versucht mit jquery umzusetzen aber irgenwie hab ich da nen denkfehler drin, denn es gibt immer weisse ränder, wenn ich browserfenster skaliere.
anscheinend werden die margin-angaben immer falsch berechnet.

woran kann es liegen?

function resizeBackground()

	{

		var ratio = 1;

		

		$('background'.width($(window).width()).height($(window).height());

		

		ratio = $(window).width() / 1440;		

		

		if($(window).height() > 750 * ratio)

		{

			ratio = $(window).height() / 750;

		}	

		

		$('#background img'.css({width: 1440 * ratio, height: 750 * ratio});

		

		if($('#background img'.width() > $(window).width())

		{

			var newMarginLeft = ($('#background img'.width() -  $(window).width()) / 2;

			$('#background img'.css({marginLeft: -newMarginLeft});

		}

		

		if($('#background img'.height() > $(window).height())

		{

			var newMarginTop = ($('#background img'.height() -  $(window).height()) / 2;

			$('#background img'.css({marginTop: -newMarginTop});

		}

	}

http://beta.bierquartier.de/portfolio/6/

may the force be with you. but mostly with me.

user-203

24.06.2009 08:26

Weiß nicht, obs noch aktuell ist und hab mir das Skript auch nicht so genau angesehen, aber letzte tage bei drweb* mal folgende Links gefunden, die vllt hilfreich sind:

http://css-tricks.com/how-to-resizeable-background-image/
http://www.buildinternet.com/project/supersized/

* Quelle

Denkt dran, Kinder auf dem Rücksitz verursachen Unfälle, Unfälle auf dem Rücksitz verursachen Kinder.

user-180

24.06.2009 18:38

Den conde vom 2. werde ich mir bei gelegenheit mal genauer ansehen; der code vom ersten scheint nix zu taugen (merkt man, wenn man das fenster in extreme größen zieht)

may the force be with you. but mostly with me.