Bild auf Fensterbreite zuschneiden

Hintergrundbilder sind praktisch, wenn man möchte, dass ein Bild je nach Fenstergröße angezeigt bzw. auch (rechts und links) abgeschnitten werden soll. Was tut man aber, wenn man ein Bild einbauen möchte, das bei kleineren Bildschirmen abgeschnitten werden soll, man aber kein Hintergrundbild verwenden kann?

Ein Layout soll wie folgt umgesetzt werden:

  • fixe Breite des Inhalts auf 1000 Pixel Breite
  • Darüber ein Bild, welches bis zu 1400 Pixel breit sein soll. Dieses soll aber bei kleineren Bildschirmen bzw. Fenstern oder Viewports, keinen horizontalen Scrollbalken erzeugen
  • Das Bild kann nicht als Hintergrundbild eingebaut werden, weil z.b. ein zusätzliches Hintergrundbild benötigt wird, oder man eine Slideshow einbauen möchte…

Beispielseite ansehen.

Auf der Beispielseite kann man gut sehen, dass erst ab einer Fensterbreite unter 1000 Pixel ein horizontaler Scrollbalken entsteht, das Bild aber 1400 Pixel breit sein kann. Ist die Browserbreite kleiner als 1400 Pixel, wird das Bild einfach rechts und links abgeschnitten. Im Beispielcode sind folgende CSS-Angaben wichtig:

#wrapper {
   width:100%;
   min-width:1000px;
   height:300px;
   overflow: hidden;
   position:relative;
}

 #wrapper div {
   width:1400px;
   position:absolute;
   left:50%;
   margin-left:-700px;
}

#container {
   width:1000px;
   margin:auto;
}

Hier zur Erklärung:

  • #wrapper
    • width: 100%; – die Breite von 100% passt sich immer der Fensterbreite an
    • min-width: 1000px; – eine Mindestbreite von 1000 Pixel (das ist die gleiche Breite wie #container – lässt man diese Angabe weg und hat man beim Laden der Seite einen Scrollbalken, erscheint beim Scrollen nach rechts kein Bild mehr )
    • overflow: hidden; – dadurch wird alles was über das div hinausragt nicht angezeigt bzw. es erzeugt keinen Scrollbalken (in der Breite und in der Höhe)
    • height: 300px; – die Höhe des Bildes – sonst wird das Bild nicht angezeigt (siehe oben)
    • position:relative; – um das darin liegende div absolute am diesem positionieren zu können
  • #wrapper div
    • width: 1400px; – die Breite des Bildes
    • position: absolutev – positioniert das div absolute von #wrapper (da #wrapper position:relative hat)
    • left: 50% ;- positioniert das div auf genau 50% von link von #wrapper
    • marin-left: -700px; – das ist nun genau die Hälfte der Breite (width: 1400px) – dadurch steht das Bild genau in der Mitte und wird rechts und links abgeschnitten
  • #container
    • width: 1000px; – das ist die Breite des restlichen Inhalts (daher auch die Mindestbreite von #wrapper)
    • margin:auto; – die Standardvariante um divs zu zentrieren
Veröffentlicht unter Web, HTML, CSS

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Archiv