Bild kleiner machen wenn Auflösung kleiner

Y

YelloW22

Erfahrenes Mitglied
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
HTML: 
<img src ...>
und in der css
Code: 
margin-left:auto; margin-right:auto;
zentriert hab.
 
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.
 
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 ****
 
YelloW22 hat gesagt.:
aber dann wird mein Bild ja verzerrt.
Zum Vergrößern anklicken....

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.

HTML: 
<!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>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück