Bild soll sich dem Browser anpassen, beim zoomen, verkleinern

[Manfred]

Ich habe ein Bild das im Organal 2000x500 Pixel Groß ist.

nun möchte ich das es sich immer dem Browser anpasst, wenn ich ihn also Breit mache soll es sich anpassen, was FUNKTIONIERT.
Doch mit der Höhe habe ich ein Problem. Wenn ich den Browser zusammenschiebe passt sich zwar das Bild der Breit an, also es wird schön klein, doch eben auch die Höhe schiebt sich zusammen. Was grundsätzlich nicht Verkehr ist.

Doch es müsste sich auf der WERT height:200px; Prozentual verkleinern

.box {
height:200px;
width:100%;
background: url(bild.jpg)top center no-repeat #ff0000;
background-size: 100% auto;
}

Manfred

[Gunnar Bittersmann]

@@Manfred:

nuqneH

Doch es müsste sich auf der WERT height:200px; Prozentual verkleinern

Die Box soll also ein Viertel so breit wie hoch sein? Das ließe sich mit
{ height: 0; padding: 25% 0 0 0 }
erreichen, da sich die Prozentangabe auch beim vertikalen Padding nach der Breite richtet.

Ob das auch mit dem Inhalt der Box funktioniert, lässt sich nicht sagen, da du diesen verschwiegen hast.

Qapla'

[mark]

Abend,

ich habe Schwierigkeiten deinen Text zu verstehen.

Weiß nicht, ob das für deine Anwendung sinvoll ist, aber du könntest background-size verwenden ( Achtung Browserkompatibilität CSS3 ).

Die verschiedenen Parameter sind hier erklärt:
http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-size

Ansonsten könntest du Media Queries verwenden, wenn die Verkleinerung bei 200px stoppen soll.
http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Aber wie gesagt: Ich hab das Problem nicht ganz verstanden, weil der Text zu wirr ist.

lg
mark

[Gunther]

Hallo!

Ich habe ein Bild das im Organal 2000x500 Pixel Groß ist.

Doch mit der Höhe habe ich ein Problem. Wenn ich den Browser zusammenschiebe passt sich zwar das Bild der Breit an, also es wird schön klein, doch eben auch die Höhe schiebt sich zusammen. Was grundsätzlich nicht Verkehr ist.

Doch es müsste sich auf der WERT height:200px; Prozentual verkleinern

Kannst du das bitte nochmal in verständlichem Deutsch formulieren?

Soll das Bild jetzt immer sein ursprüngliches Seitenverhältnis behalten, oder was?

Und wenn das Bild eine maximale Höhe von 200px haben soll, warum verkleinerst du es dann nicht, sondern schickst jedem Besucher einen 2000px x 300px großen Streifen mit, der gar nicht gebraucht wird?

Und reden wir hier eigentlich von einem "richtigen" Image (<img>), oder von einer Hintergrundgrafik?

.box {
height:200px;
width:100%;
background: url(bild.jpg)top center no-repeat #ff0000;
background-size: 100% auto;
}

CSS Code ohne den zugehörigen HTML Code ist "sinnfrei".

Gruß Gunther