Quadrate
Zwei nebeneinanderliegende Quadrate, die bei Screen-Breiten <960px untereinander als Rechtecke dargestellt werden. Bis zu einer Screen-Höhe von 640px wird das Foto als Vollbild gezeigt.
Die Höhe der Quadrate ist auf 100vh - Höhe des Fixheaders begrenzt.
Für die Positionierung wird Flexbox verwendet. Das Foto ist als CSS background-image eingebaut.
Hinweis
Die Inhaltselemente, die als Quadrat dargestellt werden sollen, erhalten jeweils die CSS-Klasse .item.
Die relativ kompliziert aussehende Berechnung von width der beiden Quadrate(.item) und der darauf folgenden padding-bottom Regel resultiert aus der Nutzung von vw-Werten(Viewport width). vw bezieht in der Breite auch die vertikale Scrollbar mit ein, wodurch bei Angabe von Breite und Höhe = 50vw aus den Quadraten nur fast quadratische Rechtecke würden. Zwischen Breite und Höhe ergibt sich in verschiedenen Browsern immer eine kleine Differenz von ca. 6-8px. Die verwendete Berechnungsart korrigiert das.
Sass SCSS
.flex-square {
@include flexbox();
@include flex-direction(column);
margin-bottom: 0;
overflow: hidden;
@include respond-above(md) {
@include flex-direction(row);
max-height: calc(100vh - 80px) !important; // betr. Resizing Header
}
.item {
width: 100%;
padding-bottom: calc(100vh - 50px);
margin-bottom: 0 !important;
background: gainsboro;
@media screen and (min-height: (740px)) {
padding-bottom: calc(64vh - 50px);
}
@media screen and (min-width: 992px) and (min-height: 576px) {
width: calc(50vw - ((100vw - 100%)/2));
padding-bottom: calc(50vw - ((100vw - 100%)/2));
max-height: calc(100vh - 80px)
}
&.image1 {
background: url("../../images/pre/pacecar.jpg") no-repeat center center;
background-size: cover;
}
&.content-text {
@include flexbox();
@include flex-direction(column);
justify-content: flex-end;
padding: 5rem 2rem;
margin-bottom: 0;
@include respond-above(md) {
padding: 50px 80px;
}
p:last-child {
margin-bottom: 0;
}
}
@include transition(all .4s);
}
}