CSS Styling | object-fit: cover; für Bilder in der "Weitere News von [autor]"-Box

Bitte in den Beiträgen keine externe Bilder einbinden, sondern nur die Dateianhänge verwenden.
Vielen dank.
  • Guten Abend zusammen,


    Ich habe gerade etwas im CSS des News-System rumprobiert und bin dabei auf eine Anpassung gestoßen die man evtl. als Standard einführen könnte. Alles natürlich nur ein Vorschlag:

    Und zwar geht es um die Bilder in der "Weitere News von [Autor]"Box (Siehe screenshot)


    Normalerweise werden die Bilder angezeigt wie bei den Einträgen 2 bis 5.

    Beim ersten Eintrag (grün markiert) wurde dem Bild der Stil object-fit: cover; gegeben.


    Die <img>-Tags werden standardmäßig in einer span angezeigt. Die Bilder selbst besitzen ja eine vordefinierten Größe:


    Das objekt-fit sorgt dafür dass von den relativ großen News-Bildern noch was zu erkennen ist. :)


    Das ganze ist natürlich stark davon abhängig welche Größe (bzw. welches Seitenverhältnis) für die eigenen News-Vorschaubilder gewählt wird. Aber generell kann man es auf 2 Szenarien runterbrechen:

    1. Es werden (nahezu) viereckige Banner verwendet.
      Hier hätte man durch object-fit: cover; keinen großen Nachteil, da durch die vorgegebene (rechteckige) Größe trotzdem alles angezeigt werden könnte.
    2. Oder es werden Banner verwendet die sehr viel Breiter als hoch sind. ( z.b. 1200x300 oder Seitenverhältnis 4:1; Breitbild)
      Mit dem Stil object-fit: cover; würde man bei klassisch breiteren Bannern zumindest noch die Mitte erkennen können.

    Ich teste noch etwas weiter rum, aber ich fand' die Anpassung so simpel & effektiv, dass ich sie auf jeden fall mal ansprechen wollte.


    mfg

  • Cyperghost

    Hat das Thema freigeschaltet.
  • Diese Box ist eine Struktur die das WSC selber nutzt und wir lediglich in dem News-System als Baustein werden.

    Theoretisch lässt sich dies trotzdem einbauen, jedoch würde das ganze vom Style des WSC selbst komplett Abkommen.


    Daher, werde ich dies vorerst nicht in de Standardumfang einbauen, aber jeder kann dies natürlich bei sich selber einbauen wie er es benötigt.

  • Dragosius

    Hat das Label von News-System 3.0 auf News-System geändert.