Größe ändern Problem

Hallo Liebe Leut,

ich habe ein Problem mit der Änderung der Größen in CSS.

Und zwar gebe ich max-width von einem bild ein. Zb 80% er nimmt aber nicht die 80% von dem Bild, sondern bleibt ständig bei 100% aber wenn ich 10% eingebe macht er es.

Und ich habe eine css Datei die erkennt er zwar, doch betrachtet die max-width Angabe nicht nur wenn ich dort auch auf 10% die Größe einstelle UND gleichzeitig in der HTML Datei

eine max-width von 100% eingebe.

Bahnhof

HTML Datei:

<div class="bild">

<img src="schriftzug.jpg" style="max-width:100%">

<h1>asdfökj</h1>

</div>

CSS Datei:

.bild

{

max-width: 10%;

color: red;

}

Zitat von Sempervivum

Da hast Du etwas falsch verstanden: Bei Prozentangaben ist die Bezugsgröße nicht das Bild selbst sondern der umgebende Container, in deinem Fall das div.bild

hab ich nicht verstanden, kannst du mir das genauer erklären.

Zitat von Sempervivum

Am besten kann man es wahrscheinlich an einem Beispiel erklären:

Angenommen, das Bild ist 400px breit und das div drumherum 800px. Wenn Du jetzt für das Bild max-width:80%; setzt, bezieht sich das auf die 800px des div, d. h. max-width wird auf 80% von den 800px des div gesetzt, was 640px ergibt. Da das immer noch viel größer ist als das Bild selbst, hat es keine Auswirkung. Setzt Du jedoch max-width:10%; so ergibt das 10%, wieder von den 800px des div, also 80px und das Bild wird verkleinert. Diese 80px sind jedoch nicht 10% sondern 20% von dem Bild selbst.

sehr nice erklärt. Danke