tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
780
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 27.12.10 10:52 #1
    YelloW22 YelloW22 ist offline Mitglied Gold
    Registriert seit
    Mar 2010
    Beiträge
    122
    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-Code:
    <img src ...>
    und in der css
    Code :
    1

    margin-left:auto; margin-right:auto;
    zentriert hab.
     
    Zitieren Zitieren
  2. 27.12.10 10:57 #2
    Avatar von timestamp
    timestamp timestamp ist offline Mitglied Rubin
    Registriert seit
    May 2010
    Ort
    Marburg
    Beiträge
    1.479
    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.
     
    Zitieren Zitieren
  3. 27.12.10 11:05 #3
    YelloW22 YelloW22 ist offline Mitglied Gold
    Registriert seit
    Mar 2010
    Beiträge
    122
    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 ****
     
    Zitieren Zitieren
  4. 27.12.10 11:27 #4
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Zitat Zitat von YelloW22 Beitrag anzeigen
    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.

    HTML-Code:
    <!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>
    Geändert von CPoly (27.12.10 um 11:35 Uhr)
     
    Zitieren Zitieren
« Tabellenbreite wird im IE8 ignoriert | Position des Content bei float nicht am Rand »

Ähnliche Themen

  1. Div zentrieren - Problem bei kleiner auflösung
    Von breytex im Forum CSS
    Antworten: 1
    Letzter Beitrag: 04.12.08, 17:59
  2. Problem mit DIV Konstruktion bei Auflösung kleiner 1000px
    Von mr_arrogant im Forum CSS
    Antworten: 10
    Letzter Beitrag: 09.08.07, 17:07
  3. Bild prozentual kleiner machen
    Von PaRkY im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 18.01.05, 12:30
  4. Bilder upload + bild kleiner machen?
    Von DeMoehn im Forum PHP
    Antworten: 2
    Letzter Beitrag: 10.10.04, 13:33
  5. wenn ich ein bild hab das kleiner ist als meine site wie kann ich es dann als bg anp
    Von Doener im Forum HTML & XHTML
    Antworten: 9
    Letzter Beitrag: 02.05.02, 20:22