mitwachsende Grafik

[donnerkai]

Hallo,
ich bin ganz neu im HTML Bereich und möchte gerne bei einem von mir erstellten HTML eine Grafik einbinden.
Das habe ich folgendermaßen getan:

img src="bilder/rollenübernommen.jpg"alt="Rolle übernommen"width="931" height="695"></p>

In der Vollansicht ist das Bild in Ordnung. Wenn ich jedoch das Fenster kleiner mache, bleibt die Grafik logischerweise in der vorher definierten Größe. Kann man die Grafik so angeben, dass sie mit der Fenstergröße quasi mitwächst??

[Cheatah]

Hi,

In der Vollansicht ist das Bild in Ordnung. Wenn ich jedoch das Fenster kleiner mache, bleibt die Grafik logischerweise in der vorher definierten Größe. Kann man die Grafik so angeben, dass sie mit der Fenstergröße quasi mitwächst??

das width- und height-Attribut geben die intrinsischen Dimensionen an, die die Grafik hat, also dessen *tatsächliche* Größe. Für die Darstellung, also jedwede anders gelagerte Größe, ist CSS zuständig. Mindest- und Höchstbreite werden über min-width und max-width angegeben, für die Höhe gibt es entsprechende Angaben. Denke daran, dass sich die expliziten Werte automatisch ergeben müssen, weil andernfalls die Skalierung von Höhe und Breite gleichermaßen nicht stattfinden wird.

Cheatah

[donnerkai]

Hallo und vielen Dank für die Antwort.
Also den Satz mit den Werten die sich ergeben müssen, habe ich nicht verstanden wenn ich ehrlich bin. Woraus ergeben die sich denn?

[Jeena Paradies]

Hallo,

Hallo und vielen Dank für die Antwort.
Also den Satz mit den Werten die sich ergeben müssen, habe ich nicht verstanden wenn ich ehrlich bin. Woraus ergeben die sich denn?

<p><img src="foo.jpg" alt="Foo"></p>

und im CSS

img { max-width: 100%; }

dann verkleinert sich das bild wenn der Bereich kleiner wird, da es sich dann immer an 100% anpasst. Wenn du keine höhe angibst dann berechnen die browser die höhe anteilig, so wie man es erwarten würde.

Jeena

[donnerkai]

Hallo Jeena,
vielen Dank.

Ich habe es so gemacht, wie von Dir beschrieben.
Leider funktioniert es nicht.
hier mal das Stylesheet:

body         { font-family:arial,sans-serif; background-color:#EBE9D8; margin-left:10%; margin-right:20%; margin-top:10px; margin-bottom:10px; } <!-- Farb- und Schriftbestimmung der Hauptanwendung-->  
  p, h1, h2, h3, h4, ul, ol, li, div, td, th, address, blockquote, nobr, b, i { font-family:arial,sans-serif; color:#070204; }  
  h1           { font-size:18pt; color:#070204; }  
  h2           { font-size:14pt; color:#070204; }  
  h2.sh2       { font-size:16pt; color:#070204; }  
  h3, h3.xmp, h3.xpl, h3.inf, h3.tip { font-size:12pt; color:#070204; }  
  h4           { font-size:12pt; color:#070204; }  
  p, ul, ol, li, div, td, th, address, nobr, b, i { font-size:12pt; color:#070204; }  
  pre          { font-family:courier new,courier; font-size:12pt; color:#070204; }  
  img { max-width: 100%; }  
  a:link       { color:##0000FF; text-decoration:underline; }  
  a:visited    { color:#800080; text-decoration:underline; }  
  a:hover { color:#FF0000; text-decoration:none;}  
  a:active     { color:#FF0000; text-decoration:none; }  
  a.an         { text-decoration:none; }  
  tt           { font-family:courier new,courier; font-size:12pt; color:#070204; }  
  td.xmpcode   { background-color:#FAF8F3; color:#C0C0C0; border:1pt solid #999999; }  
  .code        { background-color:#FAF8F3; }  
  td.xplcode   { background-color:#FAF8F3; }  
  .doc         { background-color:#FAF8F3; }  
  .qbar        { background-color:#FAF8F3; font-size:9pt; font-family:arial,sans-serif; }  
  pre.normal   { color:#000000; }  
  .imageinfo   { font-size:10pt; font-weight:bold; text-align:left; }

ist das so wie es sein soll? Ich habe die img im HTML auch angepasst und dort die Attribute wie in Deinem Beispiel beschrieben geändert. Leider erfolgt aber keine Größenanpassung

[donnerkai]

Ich habe es jetzt geschafft! Also im CSS die Größe für Grafiken auf 72%
gesetzt mit img {width: 72%; height: 72%;  }

Allerdings habe ich nun das Problem, dass er mir alle Grafiken so formatiert. Es sind insgesamt 110 HTML Seiten. Auf jeder Seite sind aber 2 Grafiken die eine fixe Größe haben müssen. Geht das auch?

[MudGuard]

Hi,

img {width: 72%; height: 72%;  }

Allerdings habe ich nun das Problem, dass er mir alle Grafiken so formatiert.

natürlich, Du selektierst ja auch alle Bilder.

Wenn das nicht der Fall sein soll, dann selektiere nur die Bilder, die davon betroffen sein sollen.

cu,
Andreas

[EKKi]

Mahlzeit donnerkai,

abgesehen von Deinem eigentlichen Problem:

[code lang=css]body         { font-family:arial,sans-serif; background-color:#EBE9D8; margin-left:10%; margin-right:20%; margin-top:10px; margin-bottom:10px; } <!-- Farb- und Schriftbestimmung der Hauptanwendung-->

Dein CSS-Code ist fehlerhaft. Informiere Dich, <http://de.selfhtml.org/css/formate/einbinden.htm#kommentare@title=wie man CSS-Code kommentiert>!

MfG,
EKKi