Wie kann ich ein Bild in HTML5 der höhe nach in % skallieren?

...komplette Frage anzeigen Screenshot - (html, Browser, webdesign)

3 Antworten

Kurz vorweg, keine Inline-Styles verwenden sondern Formatierungen ausschließlich in einem externen Stylessheet notieren. Kurz um Markup von dessen Gestaltung sauber trennen. Was jetzt deine Frage angeht, wenn es ein Hintergrundbild ist über CSS einbinden und mit Viewport-Hight (vh) arbeiten.

<!--// HTML --->
<div class="cover">
</div>
// Sass
.cover height: 100vh background: url('../path/image.jpg') no-repeat center background-size: cover
/* CSS */
.cover {
  height: 100vh;
  background: url('../path/image.jpg') no-repeat center;
  background-size: cover;
}

Mit vh wird die Höhe dem Viewports zugeordnet. Mit background-size hingegen die komplette Fläche ausgefüllt. Mit Hilfe von center alles von der Mitte aus geht. Der Inhalt also immer den sichtbaren Bereich ausfüllt. Egal ob es jetzt einem kleinen Smartphone ist, einem Tablet oder großem Desktop. 

LG medmonk 

Also das Bild soll in der Höhe auf 100% des Bildschirms skaliert werden?

Dann sollte das reichen:

img {
   height: 100%; 
   width: auto; 
   vertical-align: top;
}

Das halt in die CSS Datei oder in einen Style-Tag (du hast die 100% direkt in den img Tag gepackt, dann bedeutet das 100% der Bildgröße, nicht des Bildschirms).

Aber wenn ich height durch width ersetze, dann ist das zwar in der breite. Dann wird das Bild doch aber an die Fenstergröße angepasst, wieso dann nicht bei height?

0

Du brauchst CSS! Das, wonach du suchst, ist:

height: 100%

Allerdings klappt das nur, wenn der body genauso hoch ist wie das Fenster. Probier:

<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<img src="images/bild.png" alt="Büro" style="height: 100%; margin: 0 auto">

Wenn du noch nie etwas von CSS und Stylesheets gehört hast, dafür gibt es gute Tutorials, einfach googlen ;)

Was möchtest Du wissen?