flexible Bilderwand

[Matthias Scharwies]

Servus!

ich hab das padding einfach mit prozentualen Werten gefüttert, das löst mein Problem auf einfache Weise (watt bin ich stolz auf mich). Wär doch so auch OK, oder?

Ja, genau!

Ich habe noch etwas zum HTML zu sagen: Du hast eine Div-Suppe:

hm :( komm ich am besten mit klar...

Trotzdem wird das Markup dann schnell unübersichtlich!

Ich würde mich (aber erst) am Wochenende mal an eine Version von mir machen.

Bin gespannt wie ne Steinschleuder.

Hier ist mein Versuch: test.html

<div class="square-container">
	<a id="blog_kontakt" href="https://jungmann.photo/start.blog.html">
		Blog
	</a>
    <a id="kontakt" href="https://jungmann.photo/start.blog.html">
		Kontakt
	</a>
	<!-- /* achtung chronologisch sortiert - neue oben */ -->
	<a id="wholeyearir" href="https://jungmann.photo/20181231wholeyearir/images/pic00.jpg" data-lightbox="wholeyearir" data-title="Kirschblüte - Zwischen Hoffnung und Erinnerung blüht das Glück. Unbekannt">
		<img src="photo-Dateien/pic00_060.jpg" height="100" alt="Kirschblüte" title="Kirschblüte - Zwischen Hoffnung und Erinnerung blüht das Glück. Unbekannt">
	</a>
...

Das div enthält ein a-Element mit dem Bild drin. Hier gibt es keine Klassen.

Das CSS wird nur über den .square-container gesteuert:

.square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
}

.square-container::before {
  content: '';
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  grid-row: 1 / 2;
  grid-column: 1 / 1;
}

.square-container > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

Die Kästchen werden 15rem (oder etwas mehr breit) - es gibt keinen Rand. Die Höhe ist identisch!

Es wird mit .square-container::beforeein Pseudoelement gebildet, das mit dem padding-bottom-Fix die gleiche Breite und Höhe erhält. Mit *:first-child wird es vor das grid positioniert und ist durch grid-row 1/1 und grid-column: 1/1 unsichtbar.

.square-container > a {
  position: relative;
}

.square-container img { 
  position:absolute;
  top:0;
  lefT:0;
  object-fit: cover; 
  width:100%; 
  height: 100%;  }

Das a-Element wird relativ, das img absolut positioniert und voilá haben die Bilder ein quadratisches Format!

Der Blog-Link ist immer links oben, der Kontakt-Link mit grid-column: -2/ -1 immer rechts oben. Die Schreibschrift ist Hintergrund und nicht Teil des HTML, sondern über CSS formatiert.

Du kannst alle Bilder hovern, aber auch mit der Tab-Taste antabben.

Ich werde die Tage die Überschrift und den Blog-Link verschönern.

Herzliche Grüße

Matthias Scharwies