Layout-Problem

[misterunknown]

Moin,

Was ist denn daran "mobile"!?
Du möchtest wahrscheinlich ein responsives Layout erstellen ...!

Naja, grundsätzlich soll es erstmal eine HTML5-App mit PhoneGap werden. Ob das gleich responsive mache und als Webapp anbiete, weiß ich noch nicht genau.

Sorry, aber ich versuche mir das gerade vorzustellen, wie sich ein solches Layout u.a. auf einem Viewport von 320px x 480px und 1920px x 1080px darstellt. Bei letzterem wird das Bild dann aber bspw. sehr groß ...!

Ja, das stimmt, aber dadurch, dass es primär als App laufen soll, und von daher hauütsächlich Devices zwischen 4" und 10" Zielgruppe sind, ist das ok.

Packe das Image in ein Container-Element, welches entsprechend der Viewportgröße skaliert.
Dann brauchst du für dein(e) Image(s) lediglich:
img {max-width: 100%;}

Naja, das Problem ist, dass Header und Footer (also die Buttons) ja absolut positioniert werden und daher das Bild teilweise unter denselben liegen kann, was nicht gewollt ist. Ich habe es zwar mit calc() und einem margin-top versucht, das funktionierte aber bei mir weder im FF noch im Chrome. Allerdings habe ich vorhin irgendetwas gelesen, dass calc() als CSS-Funktion wohl auch Prefixes hat. Das werde ich mal testen.

Grüße Marco