Read More Textlänge an Thumbnailgröße anpassen

  • Hallo Zusammen,


    ich freu mich, dass es eine so aktive deutsche Wordpress Community gibt, das ist mein erster Post aber mir wurde hier schon sooft weitergeholfen durch Fragen die andere gepostet haben, vielen Dank dafür!


    Bei einem Blog den ich gerade designtechnisch etwas anpasse stehe ich vor folgender Herausforderung.

    Das Ziel:
    -Links sollen die Thumbnails zu sehen sein, rechts daneben der Text der durch das ReadMore abgeschnitten wird.
    -Die Textlänge bis zum ReadMore soll sich an die Höhe der Thumbnails anpassen, sprich bei einem hohen Bild ist mehr Text zu sehen, bei einem eher breite Bild weniger.
    -Die Bilder sollen proportional bleiben, am ende alle die gleiche Breite haben und nur in der Höhe variieren.


    Jetziger Zustand und Problem:
    -Momentan habe ich einen quadratischen div in welchen die Thumbnails rein kommen.
    -Die Bilder werden in das Quadrat eingepasst und gegebenenfalls beschnitten.
    -Der ReadMore Text hat eine feste länge.


    Ich müsste also einen Weg finden, alles flexibel aufeinander abzustimmen, inklusive des divs, der alles umgibt.
    Ich habe dazu mal eine Skizze gemacht, wie es sein sollte.

    Bisher bin ich immer ohne fundierte html oder css Kenntnisse ans Ziel gekommen, das macht sich bei sowas eben bemerkbar, ich wäre dankbar über einen Ratschlag, wie man das lösen könnte, bzw. welche Attribute ich wie wo was zuweisen muss :D


    Vielen Dank schonmal!

    Herzliche Grüße
    Moritz

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!