Bild auf Row-Höhe anpassen

  • Hallo Comunity,

    Ich habe folgendes Problem.
    In Wordpress habe ich 2 Spalten. Links mit Text - und rechts mit Bild.

    --------------
    Text I Bild
    --------------

    Ein übergroßes Bild soll in der rechten Spalte ohne Verzerrung einblenden werden.
    Die Bildausrichtung ist left - damit alles oben-links vom Bild immer zu sehen ist.

    Zur besseren Vorstellung denkt an die US-Flagge
    Die Sterne müssen immer zu 100% Bildgröße sichtbar sein
    Alles andere nur zum Teil zu sehen, je nach Browser-Breite & Row-Höhe

    Wenn Teile des Bildes außerhalb des Rahmens bzw. Browserfensters sind, dann sollen die nicht angezeigt werden. In der Breite habe ich das hinbekommen

    .bild01 img {
    overflow: hidden;
    max-width: none !important;
    }
    ______

    Die Höhe des Bildes ist mein Problem

    Sie soll in der rechten Spalte maximal so groß sein - wie die Höhe der linken Text-Spalte.
    Alles was vom Bild über die Höhe nach unten hinausläuft - soll nicht angezeigt werden.

    Hoffe Ihr könnt mir helfen
    Danke schon mal für eure Mühe ;)

    • 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

  • Ne leider nicht - neues Thema...

    Die rechte Spalte (mit Bild) soll maximal so groß sein - wie die linke Text-Spalte.
    Wenn das Bild höher ist, dann soll unterhalb alles abgeschnitten werden,
    damit die 2 Spalten der Row gleichgroß bleiben

    Wie eben eine US Flagge - wo immer die Sterne in Originalgröße zu sehen sein müssen
    und rechts am Browserrand sowie unten Bildteile abgeschnitten sein sollen

Jetzt mitmachen!

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