Bild soll immer vertikal den Browser ausfüllen

jahrgang68 · 13 Juni 2015

Guten Abend,

ich habe hier ein Problem.
Ich möchte drei Bilder auf einer Webseite darstellen.
Ich benutze HTML5 und CSS.
Das linke Bild soll 2/3 (66%) der Breite des Bildschirmes bedecken und
(nun kommt mein Problem) immer den kompletten Browser in der Höhe ausfüllen.
Dabei soll es nicht verzerrt werden sondern proportional im Ausschnitt angezeigt werden.

Die zwei Bilder auf der rechten Seite floate ich einfach.
Die rechte Seite ist ok - jedoch will mein linkes Bild nicht so wie ich will.
Es vergrößert und verkleinert sich in Proportion - wird aber auch kleiner
und hinterlässt den Hintergrund der Seite.

Ich hoffe ich konnte mich etwas verständlich ausdrücken ;-)

Vielen Dank für Eure Tip(p)s

Sven

MrMurphy · 14 Juni 2015

Hallo,

was du erreichen willst ist klar. Leider fehlen noch entscheidende Informationen.

1. Das Bild liegt uns nicht vor.

2. Wie soll sich das ganze bei kleinen Bildschirmen / Fenstergrößen verhalten, zum Beispiel Smartphones und Tablets?

3. Wie soll sich das Bild beim Wechsel von Hoch-/Querformat verhalten?

4. Ich befürchte, das du bei Lösungsansätzen mit weiteren Voraussetzungen kommst, die du noch nicht genannt hast. Sowas ist für uns Hilfswillige sehr frustrierend.

Mit deinen bisherigen Angaben würde ich das Bild als Hintergrundgrafik einfügen. Mittels "background-size: cover" füllt es dann immer den kompletten Container aus und wird je nach Bedarf in der Höhe oder Breite beschnitten, so das keine Verzerrungen auftreten.

Das könnte zum Beispiel so aussehen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Bildhöhe 100 Prozent 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
         line-height: 1.3;
         height: 100%;
      }
      body {
         height: 100%;
         padding: 0;
         /*border: 3px solid red;*/
         margin: 0;
      }
      main {
         float: left;
         background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/bf/01-wallpaper-pinnacles-australien.JPG);
         background-repeat: no-repeat;
         background-position: center center;
         /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
         background-size: contain; /* komplettes Bild ohne Verzerrung, aber mit Rand */
         background-size: 100% 100%; /* Vollbild, aber verzerrt */
         background-size: cover; /* beschnittenes Bild ohne Verzerrung */
         width: 66%;
         height: 100%;
         padding: 0;
         /*border: 3px solid blue;*/
         margin: 0;
      }
      aside {
         float: left;
         width: 34%;
         height: 100%;
         padding: 0;
         /*border: 3px solid green;*/
         margin: 0;
      }
   }
   </style>
</head>
<body>
   <main>
   </main>
   <aside>
   </aside>
</body>
</html>

Gruss

MrMurphy

jahrgang68 · 14 Juni 2015

Vielen Dank für Dein Beispiel.
Früher habe ich immer die Bilder direkt im CSS eingefügt.
Irgendwie muss ich was falsch verstanden haben und habe nun das IMG im HTML
eingefügt. Seit dem habe ich die Probleme. Und siehe da - nun habe ich wie in Deinem
Beispiel wieder background-image in CSS benutzt - und schon geht es.
Habe wohl den Wald vor lauter Bäumen nicht gesehen.

Ich brauche diese Einstellung nur für Layouts +1200px Breite.
Da ich mit media queries arbeite, werde ich für die anderen (niedrigeren) Auflösungen ein etwas einfacheres benutzen.

Vielen Dank für den Schubser in die richtige Richtung :)

Bild soll immer vertikal den Browser ausfüllen

jahrgang68

Neues Mitglied

MrMurphy

Senior HTML'ler

jahrgang68

Neues Mitglied

Neueste Beiträge