Layout-Problem

[Gunther]

Moin!

ich möchte eine (mobile) Seite bauen,

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

die Folgenden Aufbau hat:

|             Header                |     <- <header></header>

|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|              Bild                 |     <- <img />
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |

Button 1
-----------------------------------

Nun ist das ja kein großes Problem. Allerdings möchte ich, dass die Seite insgesamt _immer_ 100% des Viewports einnimmt, man also nicht vertikal scrollen muss.

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ß ...!

Demzufolge darf das Bild nicht zu groß werden, soll aber so groß wie möglich sein. Nun könnte ich zwar jeweils dem Header, dem Bild und dem Div (für die Buttons) einen Prozentwert geben (10%, 70%, 20%), dann sieht es aber auf dem Desktop nicht wirklich gut aus, daher habe ich dem header und dem div em-Werte für die Höhe gegeben.

Wie könnte ich das Bild (möglichst ohne Javascript) so skalieren, dass kein Scrollen nötig ist, das Bild aber so groß wie möglich angezeigt wird?

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%;}  

Gruß Gunther