variable Breite und Höhe bei Grafiken in mobilen Webseiten

[Wellenbrecher1963]

Hallo Leute

ich möchte eine mobile Webseite die eine feste Breite von 240 Pixel hat, auf variable Breite umstellen. Mit DIV Containern und CSS kein Thema.

Was und wie mache ich das nun bei Grafiken?

Hatte die Idee in CSS folgendes zu definieren:

  
img {  
  width:100%;  
}  

und bei dem eigentlichen Grafiken folgendes verwenden:

  
<img src="grafik.jpg" border="0" alt="Grafik">  

Die Grafiken haben eine Breite von knapp 768 Pixel und knapp 200 Pixel hoch, um sie noch im iPad gut betrachten zu können.

Wenn ich mir die Webseite hochkannt im iPhone betrachte, werden die Grafiken auf die Breite von 240 Pixel zusammen geschrumpft. Drehe ich das Ding um 90 Grad, ballern mir die Grafiken mit voller Größe, also 768 Pixel in das Display.

Beim iPad funktioniert es Klasse. Breite wird top dargestellt. Beim 90 Grad drehen, werden die Bilder auf 1024 Bildpixel aufgeblasen, aber dennoch kann man es einiger maßen gut ansehen.

Ich hatte dann auch noch folgende Idee, das Seitenverhältnis des einzelnen Bildes mit JS errechnen. Dann die aktuelle Breite auslesen und die Höhe wie folgt definieren:

  
  Hoehe = Breite / Seitenverhaeltnis;  

Und dann per JS die Höhe dem Image Tag zuweisen. Würde aber bedeuten, dass er jedesmal alle Headergrafiken kurz berechnen müßte, wenn die Seite gedreht wird, oder neu geladen wird. Denke, dass die Ladezeit da etwas leiden wird.

Was wäre noch so denkbar? Habt Ihr andere / Bessere Ideen?

Bin für jede Hilfe dankbar.

Vielen Dank für Eure Hilfe.
Euer Sylvio (Wellenbrecher1963)

[Gunnar Bittersmann]

@@Wellenbrecher1963:

nuqneH

img {
  width:100%;
}

Du möchtest 'max-width' statt 'width' verwenden?

<img src="grafik.jpg" border="0" alt="Grafik">

Du möchtest @border aus dem Markup entfernen und dies auch per CSS angeben?

Qapla'

[suit]

Was wäre noch so denkbar? Habt Ihr andere / Bessere Ideen?

Wenn du schon so auf das iPad oder das iPhone abfährst: warum lässt du den Browser nicht machen, was er ganz gut kann: bestehende Seiten oder Grafiken - egal wie beschaffen - so zu skalieren, dass sie schön in den Viewport passen.

Besonders für das iPad oder iPhone ist nicht wirklich ein zutun erforderlich.