Bild proportional skalieren

[Multi]

Mahlzeit,
ich hab einen Banner (h1-Element). Jetzt will ich, dass beim Aufziehen des Fensters der Banner proportional skaliert.Bisher klappt ds nur mit der Breite aber nicht mit der Höhe.
Ist es überhaupt machbar? Bei Hintergrundbildern ist es ja kein grosses Problem, bei Elementen hab ich noch keinen Erfolg gehabt.
Ein height: auto; schiebt den Banner auf 0px zusammen (im FF9 und Chrome 17)

Ist zwar ein Problem mit relativ geringer Priorität, aber vielleicht gibts eine einfache Lösung :)

HTML:

  
<h1 id="banner"></h1>  

CSS:

  
h1#banner {  
	width: 98%;  
	max-width: 1280px;  
	height: 130px;  
	background: url(../images/banner.png) no-repeat;  
	background-size: 100% 100%;  
	background-origin: content-box;  
	margin-left: auto;  
	margin-right: auto;  
	border: 2px solid black;  
	border-radius: 20px;  
	box-shadow: 0 0 10px 2px #000;  
}  

[JürgenB]

Hallo Multi,

versuch mal, nur eins von beiden, Höhe oder Breite, anzugeben, die andere Größe skaliert dann proportional und das Seiteverhältnis bleibt.

Gruß, Jürgen

[JürgenB]

Hallo Multi,

ich sehe gerade, dass ich deine Frage falsch verstanden habe: ich habe bei "Banner" ab ein Bild gedacht, du hast aber wohl eine Kombination aus Text, Bild, ... . Daher bringt mein Hinweis nichts.

Ob hier etwas mit CSS 3 geht, weiß ich nicht. Wenn nicht, versuch mal, dass H-Element mit einem transparenten Bild aufzuziehen. Die Inhalte müssten dann aber absolut positioniert darüber liegen.

Gruß, Jürgen

[dave]

Hi,

ich bin mir nicht sicher ob ich dich richtig verstehe.
Meinst du so wie das bei img-Elementen geht?
Breite angeben, Höhe ergibt sich daraus?

Meinem Wissenstand nach geht das nicht.

~dave

[suit]

background-size: 100% 100%;

background-size kennt "cover" und "contain" als schlüsselwörter - das unterstütz aber nicht jeder Browser. Ich hab hier vor einiger zeit einen (nicht ganz) funktionierenden Workaround gebaselt:

http://suit.rebell.at/fileadmin/a-33/example/

[Rawir]

Also... wenn ich das richtig sehe, hast du ja schon in deinem Quelltext fast die Lösung selbst geschrieben. Ich meine folgendes:

width: 98%;
max-width: 1280px;
height: 130px;

Hier gibst du für die Breite eine %-Angabe an (und eine maximale Pixelbreite, was ich so nicht kenne, aber gut...)
Die Höhe aber gibst du in Pixel an.

Wieso?
Wäre es nicht sinnvoller, auszurechnen, wie viel % der Gesamthöhe die Höhe des Banners ausmacht und dann diese %-Angabe zu benutzen? Das geht nämlich genauso wie bei %width auch bei %height.

Gruß Rawir