misterunknown: Layout-Problem

Beitrag lesen

Moin,

ich möchte eine (mobile) Seite bauen, 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. 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?

Grüße Marco

--
Ich spreche Spaghetticode - fließend.