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](https://jsr-hersbruck.de/visitenkarte/test.html) ~~~ 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: ~~~ CSS .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::before`ein 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. ~~~ CSS .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 -- 25 Jahre SELFHTML → **[SELF-Treffen 05.-07. Juni 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**

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](https://jsr-hersbruck.de/visitenkarte/test.html) ~~~ 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: ~~~ CSS .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::before`ein 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. ~~~ CSS .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 relaitv, das img absolut positioniert und vioilá 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 -- 25 Jahre SELFHTML → **[SELF-Treffen 05.-07. Juni 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**

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](https://jsr-hersbruck.de/visitenkarte/test.html) ~~~ 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: ~~~ CSS .square-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-auto-rows: 15rem; 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 leider nicht identisch - sondern 15rem hoch. Eigentlich sollte mit `.square-container::before`ein Pseudoelement gebildet werden, 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. Das funzt, aber nur wenn die Bilder nicht die gesamte Höhe des Quadrats einnehmen. Da forsch ich noch mal weiter. 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 ale Bilder hovern, aber auch mit der Tab-Taste antabben. Ich melde mich wieder, wenn ich mehr weiß. Herzliche Grüße Matthias Scharwies -- 25 Jahre SELFHTML → **[SELF-Treffen 05.-07. Juni 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**