Beiträge von doerek im Thema „CSS Styling | object-fit: cover; für Bilder in der "Weitere News von [autor]"-Box“

    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