Webentwicklung und mehr

Eine flexible Bildergalerie, die sich der Fensterbreite anpasst

Nachdem wir im letzten Beitrag einen Fotorahmen mit CSS gebaut haben, widmen wir uns nun der Weiterentwicklung des Fotorahmens hin zu einer flexiblen Bildergalerie, die sich automatisch der Fensterweite anpasst.

Diese Anleitung gliedert sich in zwei Teile. Im ersten Teil sorgen wir dafür, dass sich der Fotorahmen flexibel an die Weite des Browsers anpasst. Im zweiten Teil nehmen wir die Einstellungen für ein spaltenbasiertes Layout vor. Den Code für den Fotorahmen findet Ihr im ersten Teil der Serie.

ausflug-mit-vader

Grüße aus dem Urlaub

super-aussicht

Super Aussicht!

New York City

Nächstes mal hier…

Einen responsive Fotorahmen mit CSS entwickeln

Zunächst sorgen wir dafür, dass die Weite des Fotorahmens niemals die des Fensters überschreitet. Das lässt sich mit der max-width Eigenschaft realisieren. Folgenden Wert fügen wir der Klasse .photo hinzu.

.photo {
 ...
 max-width: 100%;
 }

Wir haben nun festgelegt, dass die Maximale Breite unseres Fotorahmens 100% ( in Bezug auf die Dimensionen des Elternelements ) nicht überschreiten darf. Nun sorgen wir dafür, dass sich die Bilder flexibel an den .photo Container anpassen. Das erzielen wir mit folgendem CSS.

.photo img {
 ...
 max-width: 100%;
 height: auto;
 }

Genau wie beim Rahmen beträgt die maximale Breite nun 100% in Bezug auf das Elternelement. Mit der Eigenschaft height und dem Wert auto sorgen wir dafür, dass die Bilder nicht verzerren sondern ihre Proportionen beim Skalieren behalten.

Mittlerweile sieht unser Fotorahmen folgendermaßen aus. Verändert die Weite eures Browsers um zu sehen wie sich der Container den äußeren Dimensionen anpasst.

ausflug-mit-vader

Grüße aus dem Urlaub

Einen flexible Bildergalerie mit CSS entwickeln

Nun widmen wir uns der Entwicklung der flexiblen Galerie. Damit unser HTML übersichtlich bleibt, erzeugen wir ein DIV mit der Klasse .photogallery. In das DIV legen wir unser Markup für die Fotorahmen. Unser HTML ändert sich folgendermaßen.

<div class="photogallery">
<div class="photo">
<img src=".../ausflug-mit-vader.jpg" alt="ausflug-mit-vader" />
<p class="caption">Grüße aus dem Urlaub</p>
</div>
...
</div>

Damit mehrere Rahmen in einer Reihe nebeneinander angezeigt werde, setzen wir die Eigenschaft float auf den Wert left. Das CSS dazu sieht wie folgt aus.

.photogallery .photo {
 float: left;
 }

Wir stellen den Selektor .photogallery vor die Klasse .photo und bezwecken damit, dass die folgenden Eigenschaften nur Fotorahmen betreffen die sich im Container .photogallery befinden. Mit der Eigenschaft float und dem Wert left schalten wir automatische Umbrüche aus. Als nächstes definieren wir eine einheitliche, flexible Breite für alle Bilderrahmen.

.photogallery .photo {
 ...
 max-width: 32%;
 margin-right: 1%;
 margin-bottom: 1%;
 }

In Summe ergeben die Werte für max-width und margin-right eine Weite von 33%. Das bedeutet, pro Zeile werden maximal drei Bilder angezeig. Allerdings stoßen wir nun auf ein kleines Problem. Unser .photo ist mit einem Innenabstand ( padding ) ausgestattet. Dieser Abstand wird zu den 33% addiert und der Browser interpretiert es als Breite über 33%. Das führt dazu, dass nach zwei Rahmen ein automatischer Umbruch vorgenommen wird. Glücklicherweise können wir dem Browser sagen, wie er den Innenabstand behandeln soll.

.photogallery .photo {
 ...
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
 }

Mit der Eigenschaft box-sizing und dem Wert border-box, sagen wir dem Browser, das er padding beim Errechnen der Breite ignorieren soll.  Übernehmt die Vendor-Prefixe -webkit und -mox für maximalen Browser Support.

Als Ergebnis erhalten wir eine Bildergalerie, die sich flexibel den Dimensionen des Browsers anpasst.

ausflug-mit-vader

Grüße aus dem Urlaub

super-aussicht

Super Aussicht!

New York City

Nächstes mal hier…

Der gesamte HTML und CSS Code für eine flexible Bildergalerie.

Im Header einbinden

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

HTML

<div class="photogallery">
<div class="photo">
<img src=".../ausflug-mit-vader.jpg" alt="ausflug-mit-vader" />
<p class="caption">Grüße aus dem Urlaub</p>
</div>
<div class="photo">
<img src=".../mountain.jpg" alt="super-aussicht" />
<p class="caption">Super Aussicht!</p>
</div>
<div class="photo">
<img src=".../DeathtoStock_NYC3.jpg" alt="New York City" />
<p class="caption">Nächstes mal hier...</p>
</div>
</div>

CSS

.photo {
 padding: 10px 10px 60px 10px;
 background-color: #F2F2F2;
 display: inline-block;
 box-shadow: 1px 3px 4px 0px #888;
 -webkit-box-shadow: 1px 3px 4px 0px #888;
 -moz-box-shadow: 1px 3px 4px 0px #888;
 position: relative;
 max-width: 100%;
}
.photo img {
 float: left;
 max-width: 100%;
 height: auto;
}
.photo .caption {
 position: absolute;
 bottom: -15px;
 left: 20px;
 right: 20px;
 font-family: 'Pacifico', cursive;
 color: #CC0000;
 font-size: 24px;
}
.photogallery {
overflow: hidden;
margin-right: -1%;
}

.photogallery .photo {
 float: left;
max-width: 32%;
margin: 0 1% 1% 0;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; 
}

Im folgenden Teil gehen wir noch einen Schritt weiter und definieren mit Hilfe von Media Queries Layouts für unterschiedliche Auflösungen. Wenn Ihr Fragen habt oder etwas anmerken möchtet, tut das gerne. Ich freue mich über euer Feedback.

Eine Antwort zu “Eine flexible Bildergalerie, die sich der Fensterbreite anpasst” + -

  1. Name MarvNet sagt:

    Cooles tut.

Schreibe einen Kommentar

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