Antwort an „Gunnar Bittersmann“ verfassen

SELF-Forum

Frage zu javascript

Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors

@@MudGuard

die Reihe der Bildchen wird einfach abgeschnitten.

Das ist auch gut so. Das nur teilweise sichtbare Bild suggeriert: hier kann man doch bestimmt horizontal scrollen.

Blöd, wenn Viewportbreite und Bildbreiten gerade so sind, dass eine ganzzahlige Anzahl von Bildern genau passt und nichts vom nächsten Bild zu sehen ist. Dann hat man bei nur während des Scrollens angezeigten Scrollbars keinen Hinweis, dass da noch mehr ist und man horizontal scrollen kann.

Hold my beer!

Man ändert also die angestrebte Bildgröße geringfügig so, dass das nächste Bild immer angeschnitten ist:

  1. Ermittle, wie viele Bilder nebeneinander passen. Zur Verfügung stehende Breite[1] geteilt durch angestrebte Bildbreite plus Zwischenraum, auf ganze Zahl gerundet:

    --visible-items: round(100cqw / (var(--suggested-size) + var(--gap)));

    Da man noch nicht in allen Browsern (hallo, Firefox) durch eine Länge teilen kann, steckt das in einem @supports-Block, wo geprüft wird, ob da eine Ganzzahl rauskommt, die ein gültiger Wert für die columns-Eigenschaft ist:

    @supports (columns: round(1em/1em)) {

  2. Berechne die Bildgröße: zur Verfügung stehende Breite geteilt durch Anzahl der Bilder minus Zwischenraum:

    --calculated-size: calc(100cqw / var(--visible-items) - var(--gap));

    Das passiert immer noch im @supports-Block.

  3. Setze die Bildgröße auf den berechneten Wert. In Brosern, in denen man noch nicht durch eine Länge teilen kann, gibt es keinen berechneten Wert; nimm dann den angestrebten Wert:

    width: auto;
height: var(--calculated-size, var(--suggested-size));

Sieht dann so aus: ☞ image size calculation

🖖 Live long and prosper

--
In our chants of “ICE out now”
Our city’s heart and soul persists
Through broken glass and bloody tears
On the streets of Minneapolis
— Bruce Springsteen, Streets of Minneapolis

  1. Ich hab das mit Container-Query-Einheit cqw gemacht. In diesem speziellen Fall (wenn der Container über die gesamte Viewportbreite geht) ginge das auch mit Viewport-Einheit vw. ↩︎

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen