# Bild kleiner machen wenn Auflösung kleiner



## YelloW22 (27. Dezember 2010)

Hallo.
Ich habe folgendes Problem.
Ich hab ein Bild als Hintergrund.
Dieses ist ca. 1500px breit.
Wenn die Auflösung in der Breite jetzt also kleiner als diese 1500px wird, bekomm ich nen Scrollbalken.
Das will ich aber nicht.
Ich hätte gern eine Lösung, damit mein bild egal bei welcher Auflösung "gleich groß" bleibt, sprich kein Scrollbalken kommt. Toll wär auch wenn die Ränder zum Bildschirm-Rand gleich bleiben würden.
CSS und HTML denk ich kann ich mir hier schenken, weil ich wie gesagt bisher nur das Bild gesetzt 
	
	
	



```
<img src ...>
```
 und in der css 
	
	
	



```
margin-left:auto; margin-right:auto;
```
 zentriert hab.


----------



## timestamp (27. Dezember 2010)

Damit das Bild automatisch skaliert wird, musst du im img-tag die Parameter width und height befüllen. Die aktuelle Fenstergröße erhälst du mit Javascript.


----------



## YelloW22 (27. Dezember 2010)

aber dann wird mein Bild ja verzerrt.
es ist mehr oder weniger ein Widescreen-Format (des Bildes).
Wenn jetzt einer 4:3 hat und ich mein Bild so skaliere --> verzerrt.
Ich wills einfach nur in der Breite angepasst haben, die Höhe sollte vllt automatisch mitgehen...
Kann ich keine %-Angaben machen wie zB.: bei Margin ****


----------



## CPoly (27. Dezember 2010)

YelloW22 hat gesagt.:


> aber dann wird mein Bild ja verzerrt.



Nicht wenn du nur Höhe ODER Breite setzt. Das andere passt sich automatisch an, damit das Seitenverhältnis bleibt.

Edit:
Die Ränder (durch das umgebende div mittels padding festgelegt) bleiben immer fest und das Bild wird von der Breite her skaliert.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
	
	<style type="text/css">
		* {
			margin:0px;
			padding:0px;
		}
		
		#bg_wrapper {
			padding:0px 20px;
		}
		
		#bg {
			display:block;
			margin:auto;
			max-width:100%;
		}
	</style>
</head>

<body>
	<div id="bg_wrapper">
		<img src="bg.jpg" id="bg" />
	</div>
</body>

</html>
```


----------

