Bilder waren hochkant gestreckt und ungleich hoch, Abstaende halbiert

Rueckmeldung 22.08.2026 per Bildschirmfoto: "die sollen alle gleich aussehen und nicht einer groesser oder kleiner" und "ich will nicht soooo viel abstand". 1) Verzerrte, ungleich hohe Projektbilder Nachgemessen: 576px breit, aber 750px bzw. 696px hoch -- also hochkant gestreckt und unterschiedlich, obwohl im CSS sauber "aspect-ratio: 16/10" stand. Ursache: die width/height-Attribute im HTML (die dort bewusst stehen, damit der Browser vor dem Laden den Platz reserviert und die Seite nicht springt) wirken wie eine CSS-Hoehe und schlagen aspect-ratio. Fix zentral ueber ".wd img[width][height] { height: auto }" statt in jeder einzelnen Regel -- so kann es bei einem neuen Bild nicht vergessen werden. Jetzt beide 576x360, Karten beide 853px hoch. 2) Zu viel Leerraum .wd-abschnitt hatte 100,8px oben UND unten, also gut 200px zwischen zwei Abschnitten. Halbiert auf 57,6px, Hero von 78svh auf 68svh. Seitenlaenge dadurch 8798px -> 7089px bei gleichem Inhalt. 3) Zwei neue Dauerpruefungen in pruefe-webdesign-handy.mjs, damit genau diese beiden Fehlerarten nicht wieder per Bildschirmfoto auffallen muessen: - verzerrte Bilder (gewuenschtes vs. tatsaechlich gerendertes Seitenverhaeltnis, 2 % Toleranz) - ungleich hohe Karten innerhalb EINER Rasterzeile 40/40 Abnahme weiterhin sauber. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-22 18:26:07 +02:00
parent 356bb974b8
commit 29a054c359
2 changed files with 96 additions and 4 deletions
@@ -125,8 +125,14 @@ body.wd::after {
 .wd-container { width: min(1180px, 92vw); margin: 0 auto; }
 .wd-container--schmal { width: min(860px, 92vw); }

-.wd-abschnitt { padding: clamp(3.4rem, 7vw, 6.5rem) 0; position: relative; }
-.wd-abschnitt--eng { padding: clamp(2rem, 4vw, 3.2rem) 0; }
+/* Abstand zwischen den Abschnitten.
+   Vorher clamp(3.4rem, 7vw, 6.5rem) = 100,8px oben UND unten, also gut
+   200px Leerraum zwischen zwei Abschnitten. Rueckmeldung 22.08.2026:
+   "ich will nicht soooo viel abstand". Jetzt rund die Haelfte -- immer
+   noch klar getrennt, aber ohne dass man an leeren Flaechen
+   vorbeiscrollt. */
+.wd-abschnitt { padding: clamp(2.2rem, 4vw, 3.6rem) 0; position: relative; }
+.wd-abschnitt--eng { padding: clamp(1.4rem, 2.6vw, 2.2rem) 0; }
 /* Abwechselnde Grundfläche statt Trennlinien — ruhiger und trotzdem klar. */
 .wd-abschnitt--gehoben { background: linear-gradient(180deg, transparent, var(--wd-dunkelblau) 14%, var(--wd-dunkelblau) 86%, transparent); }

@@ -196,6 +202,28 @@ body.wd::after {
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
 }

+
+/* ---------------------------------------------------------------------
+   BILDVERHAELTNIS — diese Regel verhindert einen Fehler, der schon
+   passiert ist und sonst wieder passiert.
+
+   Bilder tragen im HTML bewusst width/height als Attribute: der Browser
+   reserviert damit vor dem Laden den richtigen Platz und die Seite
+   springt beim Nachladen nicht. Diese Attribute wirken aber wie eine
+   CSS-Hoehe -- und schlagen damit jedes spaetere "aspect-ratio".
+
+   Live gemeldet am 22.08.2026 ("die sollen alle gleich aussehen"): die
+   beiden Projektbilder standen mit 750px bzw. 696px Hoehe bei nur 576px
+   Breite da, also hochkant gestreckt und ungleich hoch, obwohl im CSY
+   sauber 16:10 stand.
+
+   "height: auto" gibt die Hoehe an aspect-ratio zurueck. Es steht hier
+   einmal zentral fuer alle Bilder mit Seitenverhaeltnis, statt in jeder
+   einzelnen Regel -- so kann es bei einem neuen Bild nicht vergessen
+   werden.
+   --------------------------------------------------------------------- */
+.wd img[width][height] { height: auto; }
+
 /* ---------------------------------------------------------------------
   3. KARTEN — "glasartig mit feinen Neonrändern" (Masterplan S.6)
   Der Rand ist bewusst ein Verlauf über border-box statt einer flachen
@@ -786,7 +814,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
   Adressleiste — der Knopf rutscht damit beim ersten Laden unter die
   sichtbare Kante, genau das, was die Hero-Regel verbietet.
   --------------------------------------------------------------------- */
-.wd-hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); min-height: 78svh; display: flex; align-items: center; }
+.wd-hero { position: relative; padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.2rem, 4vw, 3.4rem); min-height: 68svh; display: flex; align-items: center; }
 .wd-hero-inhalt { max-width: 780px; }
 .wd-hero h1 { margin-bottom: .45em; }
 .wd-hero .wd-lead { margin-bottom: 1.8rem; max-width: 62ch; }
@@ -101,7 +101,69 @@ for (const pfad of SEITEN) {
        if (txt === el.getAttribute("data-i18n")) roh.push(txt);
      }

-      return { ueberlauf, raus: raus.slice(0, 5), klein: klein.slice(0, 5), roh: roh.slice(0, 5) };
+      /* Verzerrte Bilder.
+         Am 22.08.2026 gemeldet: zwei Projektbilder standen 576px breit,
+         aber 750px bzw. 696px hoch da -- hochkant gestreckt und ungleich,
+         obwohl im CSS 16:10 stand. Ursache waren die height-Attribute im
+         HTML, die wie eine CSS-Hoehe wirken und aspect-ratio schlagen.
+         Diese Pruefung vergleicht das im CSS gewuenschte Verhaeltnis mit
+         dem tatsaechlich gerenderten -- damit faellt so etwas sofort auf
+         und nicht erst per Bildschirmfoto. */
+      const verzerrt = [];
+      for (const bild of document.querySelectorAll("img")) {
+        const s = getComputedStyle(bild);
+        if (s.display === "none") continue;
+        const r = bild.getBoundingClientRect();
+        if (r.width < 2 || r.height < 2) continue;
+
+        const gewuenscht = s.aspectRatio;
+        if (!gewuenscht || gewuenscht === "auto") continue;
+        const teile = String(gewuenscht).split("/").map((t) => parseFloat(t));
+        if (teile.length !== 2 || !teile[0] || !teile[1]) continue;
+
+        const soll = teile[0] / teile[1];
+        const ist = r.width / r.height;
+        // 2 % Toleranz für Rundung auf ganze Pixel
+        if (Math.abs(soll - ist) / soll > 0.02) {
+          verzerrt.push(
+            (bild.className || bild.src.split("/").pop()).toString().slice(0, 40) +
+            ` soll ${soll.toFixed(2)}, ist ${ist.toFixed(2)} (${Math.round(r.width)}x${Math.round(r.height)})`
+          );
+        }
+      }
+
+      /* Gleich große Karten in einer Reihe. "die sollen alle gleich
+         aussehen und nicht einer größer oder kleiner" -- ungleiche Höhen
+         in EINER Zeile sind der haeufigste Grund, warum ein Raster
+         unaufgeraeumt wirkt. */
+      const ungleich = [];
+      for (const raster of document.querySelectorAll(".wd-grid")) {
+        const kinder = [...raster.children].filter((k) => k.getBoundingClientRect().height > 0);
+        if (kinder.length < 2) continue;
+        // Nur Elemente vergleichen, die tatsächlich nebeneinander stehen
+        const reihen = new Map();
+        for (const k of kinder) {
+          const oben = Math.round(k.getBoundingClientRect().top);
+          const schluessel = Math.round(oben / 8) * 8;
+          if (!reihen.has(schluessel)) reihen.set(schluessel, []);
+          reihen.get(schluessel).push(Math.round(k.getBoundingClientRect().height));
+        }
+        for (const [, hoehen] of reihen) {
+          if (hoehen.length < 2) continue;
+          if (Math.max(...hoehen) - Math.min(...hoehen) > 2) {
+            ungleich.push(`${raster.className.slice(0, 30)}: ${hoehen.join(", ")}px`);
+          }
+        }
+      }
+
+      return {
+        ueberlauf,
+        raus: raus.slice(0, 5),
+        klein: klein.slice(0, 5),
+        roh: roh.slice(0, 5),
+        verzerrt: verzerrt.slice(0, 5),
+        ungleich: ungleich.slice(0, 5),
+      };
    }, breite);

    const zeile = `  ${String(breite).padStart(4)}px`;
@@ -110,6 +172,8 @@ for (const pfad of SEITEN) {
    if (befund.raus.length) fehler.push("ragt heraus: " + befund.raus.join(", "));
    if (befund.klein.length) fehler.push("Touch-Ziel < 44px: " + befund.klein.join(", "));
    if (befund.roh.length) fehler.push("unuebersetzt: " + befund.roh.join(", "));
+    if (befund.verzerrt.length) fehler.push("Bild verzerrt: " + befund.verzerrt.join(" | "));
+    if (befund.ungleich.length) fehler.push("ungleich hohe Karten: " + befund.ungleich.join(" | "));

    if (fehler.length) {
      probleme.push(`${pfad} @ ${breite}px -> ${fehler.join(" | ")}`);