Fotos

Bildgröße

Damit die Bilder im Inhaltsbereich sich responsive anpassen, wird eine maximale Beite und eine automatische Höhe vergeben:

/* bilder -anpassen der grösse */
img {max-width: 100%;
height:auto;
display:block;
margin:0 auto;
}

Bilder in Spalten

Damit sich die Bilder in Spalten nicht mehr untereinander, sondern wenn gewünscht nebeneinander legen, ist die "float-Angabe" zuständig.

/* float */
.col {width: 100%;
margin: 0 auto;
float:left;
}

Breite der Spalten

Die Anzahl der nebeneinander liegenden Spalten wird durch eine Angabe der Breite in Prozent getätigt.

/* beispiel breite spalten */
.span_1_of_1 {width: 100%;}
.span_1_of_2 {width: 50%;}
.span_1_of_3 {width:33.33%;}
.span_1_of_4 {width: 25%;}