.elementor-1440 .elementor-element.elementor-element-e7468f8{margin-top:50px;margin-bottom:50px;}.elementor-1440 .elementor-element.elementor-element-c28c890{text-align:left;}.elementor-1440 .elementor-element.elementor-element-c28c890 .elementor-heading-title{color:#333333;font-family:"Poppins", chiller;font-size:46px;font-weight:300;}.elementor-1440 .elementor-element.elementor-element-aa0a41f{text-align:left;color:#6C6C6C;font-family:"Poppins", chiller;font-size:16px;font-weight:400;line-height:28px;}.elementor-1440 .elementor-element.elementor-element-a463d0d .elementor-icon-list-icon i{color:var( --e-global-color-a87af67 );transition:color 0.3s;}.elementor-1440 .elementor-element.elementor-element-a463d0d .elementor-icon-list-icon svg{fill:var( --e-global-color-a87af67 );transition:fill 0.3s;}.elementor-1440 .elementor-element.elementor-element-a463d0d{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-1440 .elementor-element.elementor-element-a463d0d .elementor-icon-list-text{transition:color 0.3s;}.elementor-1440 .elementor-element.elementor-element-3b27330{text-align:left;color:#6C6C6C;font-family:"Poppins", chiller;font-size:16px;font-weight:400;line-height:28px;}.elementor-1440 .elementor-element.elementor-element-6ee3335{text-align:left;}.elementor-1440 .elementor-element.elementor-element-6ee3335 .elementor-heading-title{color:#333333;font-family:"Poppins", chiller;font-size:32px;font-weight:300;}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-bottom:calc(30px/2);}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-top:calc(30px/2);}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:calc(30px/2);margin-left:calc(30px/2);}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-items.elementor-inline-items{margin-right:calc(-30px/2);margin-left:calc(-30px/2);}body.rtl .elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{left:calc(-30px/2);}body:not(.rtl) .elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{right:calc(-30px/2);}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-icon i{color:var( --e-global-color-a87af67 );transition:color 0.3s;}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-icon svg{fill:var( --e-global-color-a87af67 );transition:fill 0.3s;}.elementor-1440 .elementor-element.elementor-element-69cbfb7{--e-icon-list-icon-size:20px;--icon-vertical-offset:0px;}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-item > a{font-family:"Roboto", chiller;font-size:19px;font-weight:400;}.elementor-1440 .elementor-element.elementor-element-69cbfb7 .elementor-icon-list-text{transition:color 0.3s;}.elementor-1440 .elementor-element.elementor-element-f092608{text-align:left;}.elementor-1440 .elementor-element.elementor-element-f092608 .elementor-heading-title{color:#333333;font-family:"Poppins", chiller;font-size:32px;font-weight:300;}.elementor-1440 .elementor-element.elementor-element-f092608 > .elementor-widget-container{margin:30px 0px 0px 0px;}.elementor-1440 .elementor-element.elementor-element-4554868 .cocoen-drag{width:1px;background-color:#ffffff;}.elementor-1440 .elementor-element.elementor-element-4554868 .cocoen-drag::before{width:30px;height:50px;border-style:solid;border-width:3px 3px 3px 3px;border-color:#ffffff;border-radius:0px;}.elementor-1440 .elementor-element.elementor-element-4554868 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1440 .elementor-element.elementor-element-4554868{width:var( --container-widget-width, 44% );max-width:44%;--container-widget-width:44%;--container-widget-flex-grow:0;}.elementor-1440 .elementor-element.elementor-element-f78a296{text-align:left;}.elementor-1440 .elementor-element.elementor-element-f78a296 .elementor-heading-title{color:#333333;font-family:"Poppins", chiller;font-size:32px;font-weight:300;}.elementor-1440 .elementor-element.elementor-element-ea4c2c2{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-1440 .elementor-element.elementor-element-ea4c2c2 .e-gallery-item:hover .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}@media(max-width:767px){.elementor-1440 .elementor-element.elementor-element-4554868{width:var( --container-widget-width, 387.7px );max-width:387.7px;--container-widget-width:387.7px;--container-widget-flex-grow:0;}}/* Start custom CSS for ucaddon_uc_before_after, class: .elementor-element-4554868 */Weiter zum Inhalt
Du:
hallo Chat GPT, ich kämpfe imelementor mit einem Elemet, das an sich sehr schön in der Funktion aber mit der Größe mener Bilder nicht gut funktioniert. ich kann leider nicht erkenne, wie es heißt, nur ein Erläuterungstext ist dem Element zuzuordnen: this will allow you interact(drag handle) withthe slider inside the Elementor editor. Ich lege zwei Bilder ab und kann durch einen "griff" die Bilder übereinander legen bzw, verschieben. Gibt es eventuell eine ähnliche funktion, die besser mit Bildergößen, die nicht alle 500px hoch sind ungehen kann?
ChatGPT:

Hallo 🙂 ich glaube, ich weiß genau, welches Elementor-Widget du meinst.
Das klingt nach dem „Image Comparison“ Widget (auch „Before/After Image Comparison“ oder „Image Compare Slider“ genannt).

➡️ Das ist ein typisches Addon-Widget (oft in Elementor Pro oder in Addons wie Essential Addons, Element Pack, Premium Addons usw. enthalten). Damit kann man zwei Bilder übereinanderlegen und mit einem Schieberegler vergleichen.
Dein Problem:

Wenn die beiden Bilder nicht die gleiche Höhe haben (z. B. eins 500px hoch, das andere 700px), „zerreißt“ das Widget meistens das Layout oder das Handle sitzt nicht korrekt.
Mögliche Lösungen:

    Bilder vorher angleichen

        Am saubersten ist es, die beiden Bilder vorher in einem Bildbearbeitungsprogramm (z. B. Photoshop, Affinity, Canva oder sogar im WordPress-Medieneditor) auf die gleiche Höhe/Seitenverhältnis zu bringen.

        So vermeidest du, dass Elementor sie unterschiedlich behandelt.

    CSS-Hacks (falls du die Bilder nicht angleichen kannst)
    Du kannst per Custom CSS erzwingen, dass beide Bilder auf die gleiche Höhe gestreckt oder skaliert werden. Beispiel:

    .eael-image-comparison img {
      object-fit: cover;
      height: 500px; /* oder auto, je nach Bedarf */
      width: 100%;
    }

    (Klassenname kann je nach Addon abweichen – im Inspektor im Browser prüfen!)

    Alternative Widgets

        Falls das aktuelle Widget zu starr ist: Es gibt mehrere Addons, die ähnliche Slider anbieten, manche sind flexibler mit Bildgrößen:

            Essential Addons – Image Comparison

            Premium Addons – Before & After Slider

            Element Pack – Image Comparison

        Teilweise bieten die an, Bilder automatisch proportional zu skalieren, sodass die Höhe nicht manuell identisch sein muss.

    Alternative Darstellung
    Wenn es nicht unbedingt ein Vergleich mit Schieberegler sein muss, könntest du auch eine Galerie mit Hover-Effekt nutzen (z. B. „Image Hover Swap“) – dabei wird beim Überfahren mit der Maus das andere Bild angezeigt. Das umgeht die Höhenproblematik.

👉 Meine Frage an dich:
Willst du den Vergleich unbedingt mit dem Schieberegler (Before/After) haben, oder wäre auch ein Effekt wie „beim Hovern Bild wechseln“ eine gute Lösung?

Dann kann ich dir die passende Alternative oder einen CSS-Fix für dein aktuelles Widget raussuchen.
Du:
Du hast auf jeden Fall richtig erkannt, welches widget es ist. Es geht um den vorher nachher vergleich. Mein Problen ist, dass selbst wenn ich die Bilder auf die identische höhe bearbeitet habe, nur ein Ausschnitt von den Bildern gezeigt wird, das verstehe ich nicht. Auch die Anpassung unter dem CSS-Fix ist irgendwie nicht zielführend.
ChatGPT:

Alles klar 👍 danke für die Klarstellung – dann sind wir beim Before/After Image Comparison Widget, und das Verhalten klingt nach dem typischen „Ausschnitt-Problem“.

Das passiert fast immer, weil das Widget intern die Bilder mit background-size: cover oder object-fit: cover einbindet.
👉 Das bedeutet: Das Bild wird immer so groß gezogen, dass der Container voll ist – Überstände werden abgeschnitten.
Warum passiert das, obwohl die Bilder gleich groß sind?

    Das Widget setzt den Container nach einer festen Höhe (z. B. 500px oder prozentual).

    Deine Bilder werden dann auf diese Höhe gezwungen → wenn das Seitenverhältnis nicht passt, wird oben/unten oder links/rechts etwas abgeschnitten.

Lösungen (ohne das Widget wechseln zu müssen):

    CSS anpassen, damit die Bilder vollständig angezeigt werden
    Versuch mal, bei dem Widget folgendes CSS zu hinterlegen (ggf. Klassenname anpassen – am besten mit Rechtsklick → „Untersuchen“ im Browser prüfen, wie das Widget heißt, oft .twentytwenty-container oder ähnlich):

    .twentytwenty-container img {
      object-fit: contain !important;
      width: 100% !important;
      height: auto !important;
    }

    🔑 Unterschied: contain sorgt dafür, dass das Bild komplett sichtbar bleibt (kein Zuschnitt). Dafür kann es aber sein, dass links/rechts oder oben/unten ein kleiner Rand bleibt (weil die Proportionen gewahrt werden).

    Höhe des Containers flexibel machen
    Manche Addons setzen per CSS/JS eine feste Höhe (z. B. height: 500px). Wenn das der Fall ist, kannst du überschreiben:

    .twentytwenty-container {
      height: auto !important;
    }

    Im Widget selbst prüfen
    Einige Versionen (z. B. bei Essential Addons) haben in den Einstellungen des Widgets schon eine Option für:

        „Image Fit: Cover / Contain“

        „Responsive Height“
        Falls vorhanden, auf „Contain“ bzw. „Responsive“ stellen.

👉 Damit ich dir den exakten CSS-Code geben kann, bräuchte ich einmal den Klassennamen deines Vergleichs-Widgets (also was Elementor im HTML rausgibt, z. B. eael-image-comparison oder twentytwenty-container).

Möchtest du mir mal den Klassennamen oder einen Screenshot vom HTML/CSS-Inspektor zeigen? Dann baue ich dir die passgenaue Lösung.
Du:
Irgendwie kriege ich das mit der Identifizierung nicht hin. In dem CSS Fenster steht das hochgeledene...
ChatGPT:

Alles gut 👍 das ist ein klassisches Elementor-Problem: Im Elementor-Editor oder in den Bild-Einstellungen siehst du oft nur das Bild selbst, nicht das Wrapper-Element (also den Container, der den Zuschnitt macht).

Um den richtigen Klassennamen rauszufinden, gibt’s zwei einfache Wege:
🕵️ Möglichkeit 1: Browser-Inspektor

    Öffne deine Seite im Frontend (nicht im Elementor-Editor).

    Rechtsklick auf den Bild-Vergleich → „Untersuchen“ (Chrome/Edge/Firefox).

    Im Quellcode siehst du dann, wie das Widget heißt – häufig sowas wie:

        .twentytwenty-container

        .eael-image-comparison

        .premium-before-after

    Den Klassennamen kannst du mir dann schicken.

🕵️ Möglichkeit 2: Elementor selbst

    Klicke das Widget an → im linken Panel ganz unten gibt es den Tab „Erweitert“.

    Dort kannst du ein CSS-Klasse oder CSS-ID vergeben, z. B. mein-vergleich.

    Danach kannst du im Custom CSS exakt auf dieses Widget zielen:

    .mein-vergleich img {
      object-fit: contain !important;
      width: 100% !important;
      height: auto !important;
    }

    .mein-vergleich {
      height: auto !important;
    }

👉 Damit umgehen wir das Rätselraten. Du kannst also entweder den vorhandenen Klassennamen raussuchen (Variante 1), oder du gibst dem Widget selbst einen eindeutigen Namen (Variante 2), und ich schreibe dir dann das CSS genau für diesen Namen.

Willst du lieber Variante 2 ausprobieren (eigene Klasse vergeben), damit wir eine saubere, einfache Lösung bauen?
Du:
ChatGPT:

Perfekt, danke für den Screenshot 🙌 jetzt sehe ich, wo dein „Ausschnitt“-Problem herkommt.

In deinem Custom-CSS steht aktuell:

.elementor-1440 .elementor-element.elementor-element-4554868 img {
  max-height: 600px;
  object-fit: cover;
}

    max-height: 600px; → das zwingt die Bilder, sich innerhalb von 600px einzupassen.

    object-fit: cover; → sorgt dafür, dass das Bild den Container komplett füllt, aber dafür abgeschnitten wird.

Genau deshalb siehst du nur einen Ausschnitt.
Lösung: alles sichtbar machen

Ändere das CSS mal so:

.elementor-1440 .elementor-element.elementor-element-4554868 img {
  width: 100%;
  height: auto;
  object-fit: contain !important;
}

👉 Erklärung:

    width: 100% → Bild nutzt die volle Breite des Containers.

    height: auto → Höhe richtet sich nach Proportion des Bildes (kein Zwang).

    object-fit: contain → Bild wird komplett gezeigt, auch wenn links/rechts oder oben/unten ein Rand entsteht.

Falls der Container selbst eine feste Höhe erzwingt, kannst du zusätzlich noch schreiben:

.elementor-1440 .elementor-element.elementor-element-4554868 {
  height: auto !important;
}

🎯 Damit sollten deine Bilder nicht mehr beschnitten sein, sondern vollständig angezeigt werden.

👉 Soll ich dir auch noch eine Version schreiben, die beide Bilder immer exakt gleich hoch zieht (auch wenn sie unterschiedliche Proportionen haben)?
Du:
ich hoffe du kannst damit was anfangen, ich erkenne nichts
ChatGPT:

Ja, perfekt, jetzt kann ich was erkennen 🙌

Dein Widget läuft über das Addon Cocoen Before After. Das sieht man am Wrapper:

<div id="uc_uc_before_after_elementor_4554868" class="cocoen before-after-widget">

👉 Das heißt: Alle Bilder dort liegen im Container .cocoen.
Sauberes CSS für dein Widget

Probier mal dieses CSS (im „Individuelles CSS“ Tab deines Widgets):

.elementor-1440 .elementor-element.elementor-element-4554868.cocoen img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.elementor-1440 .elementor-element.elementor-element-4554868.cocoen {
  height: auto !important;
}

Erklärung:

    .elementor-1440 .elementor-element.elementor-element-4554868.cocoen img → wir sprechen die Bilder im Cocoen-Widget direkt an.

    object-fit: contain → zeigt die Bilder vollständig, statt sie zu beschneiden.

    height: auto → Container passt sich flexibel der Bildhöhe an.

⚠️ Hinweis: Wenn die beiden Bilder unterschiedliche Seitenverhältnisse haben (z. B. eins 1024×768 und eins 1024×903 wie bei dir), wird eines etwas mehr „Luft“ haben. Das ist technisch kaum zu vermeiden, wenn du den Zuschnitt komplett verhindern willst.

👉 Wenn du willst, kann ich dir noch ein CSS schreiben, das beide Bilder erzwingt, dieselbe Höhe zu haben, auch wenn eins dann leicht gestreckt oder gestaucht wird.

Soll ich dir diese „gleich hoch, aber evtl. leicht verzerrt“-Variante auch geben?
Du:
ja, bitte. Der Code funktioniert auf jeden fall besser. hast Du noch idee, wie ich ein max. Höhe festlegen kann, damit man auf dem Bildschirm eine Höhe bekommt, die das ganze Bild darstellt, ohne scrollen zu müssen?
ChatGPT:

Super 👍 freut mich, dass der Code schon besser funktioniert!

Jetzt zu deinem Wunsch:
👉 maximale Höhe setzen, ohne Scrollen – und beide Bilder gleich hoch erzwingen.
CSS-Lösung

Füg das mal in dein „Individuelles CSS“ beim Widget ein:

.elementor-1440 .elementor-element.elementor-element-4554868.cocoen {
  max-height: 80vh; /* Höhe max. 80% vom Bildschirm */
  overflow: hidden; /* verhindert Scrollen im Widget */
}

.elementor-1440 .elementor-element.elementor-element-4554868.cocoen img {
  height: 100% !important;  /* beide Bilder gleich hoch */
  width: auto !important;   /* Breite passt sich an */
  object-fit: cover;        /* füllt den Bereich gleichmäßig */
}

Erklärung

    max-height: 80vh; → Die Höhe des Widgets darf max. 80% der Browser-Höhe betragen (du kannst auch 70vh oder 600px nehmen).

    overflow: hidden; → schneidet alles ab, was darüber hinausgeht.

    height: 100% → Bilder werden gezwungen, gleich hoch zu sein.

    object-fit: cover → sorgt dafür, dass sie den Bereich gleichmäßig ausfüllen (kleine Zuschnitte können dabei passieren, aber beide Bilder sind exakt gleich hoch sichtbar).

👉 Du hast jetzt die Wahl zwischen zwei Varianten:

    object-fit: contain → nichts wird beschnitten, aber es können Ränder entstehen.

    object-fit: cover → Bilder sind randlos gleich hoch, aber minimal beschnitten.

Soll ich dir ein CSS-Snippet machen, bei dem du per zusätzlicher Klasse („contain“ oder „cover“) einfach auswählen kannst, welche Variante du bei einem Vergleich einsetzen willst?
Du:
hmm, der Code hat das Bild noch höher dargestellt, da passt was nicht
ChatGPT:

Ah, danke für die Rückmeldung 🙏 – dann liegt’s daran, dass wir mit height: 100% das Bild an den Container gebunden haben, und der Container orientiert sich aktuell an der Bildgröße → dadurch wächst er statt sich zu begrenzen.

Wir müssen also den Container begrenzen und die Bilder daran anpassen, statt umgekehrt.
Neue Version für dich:

Probier mal diesen Code:

.elementor-1440 .elementor-element.elementor-element-4554868.cocoen {
  max-height: 80vh;          /* max. Höhe: 80% vom Bildschirm */
  height: auto !important;   /* Container passt sich sonst normal an */
  overflow: hidden;          /* keine Scroll-Leisten */
}

.elementor-1440 .elementor-element.elementor-element-4554868.cocoen img {
  max-height: 80vh;          /* Bilder passen sich dieser Höhe an */
  width: auto;               /* Breite bleibt proportional */
  height: auto;              /* keine Verzerrung */
  object-fit: contain !important; /* zeigt das ganze Bild */
  display: block;
  margin: 0 auto;            /* zentriert, wenn kleiner */
}

Erklärung

    Container (.elementor-1440 .elementor-element.elementor-element-4554868.cocoen) → bekommt eine feste maximale Höhe (max-height), damit nichts größer als der Bildschirm wird.

    Bilder (.elementor-1440 .elementor-element.elementor-element-4554868.cocoen img) → bekommen ebenfalls max-height: 80vh, damit sie sich in den Container „einfügen“ statt ihn zu sprengen.

    Mit object-fit: contain siehst du das komplette Bild, ohne dass Teile abgeschnitten werden.

👉 Damit solltest du auf dem Bildschirm immer die komplette Badewanne sehen können, ohne Scrollen.

Willst du, dass ich dir noch eine zweite Variante mit cover mache (schöner randlos, aber mit Zuschnitt), und du kannst dann je nach Widget zwischen beiden wechseln?
Du:
nee, da hängt noch irgendwo was, wahrscheinlich in einer anderen "Ecke". Die Anzeige verändert sich nicht mehr. Ich habe aus der 80  - 60 gemacht und es bleibt identisch, müßte doch kleiner werden, oder?
ChatGPT:

Genau 👍 – wenn du 80vh → 60vh änderst und sich nichts tut, dann heißt das: unser CSS wird von etwas anderem überstimmt. Elementor-Widgets haben oft sehr starke Inline-Styles oder tiefere Selektoren.

Wir müssen also härter zielen und ggf. !important einsetzen, sonst greift es nicht.
Versuch mal diese Variante (mit !important überall):

.elementor-1440 .elementor-element.elementor-element-4554868.cocoen {
  max-height: 60vh !important;   /* Höhe auf 60% des Viewports begrenzen */
  height: auto !important;
  overflow: hidden !important;
}

.elementor-1440 .elementor-element.elementor-element-4554868.cocoen img {
  max-height: 60vh !important;   /* Bilder passen sich dieser Höhe an */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

🔍 Falls es immer noch keine Änderung gibt, gibt’s zwei Möglichkeiten:

    Der Container heißt nicht .elementor-1440 .elementor-element.elementor-element-4554868.cocoen, sondern Elementor setzt etwas Tieferes (z. B. .cocoen > div > img).
    → Dann müssten wir die exakte Struktur aus deinem Screenshot nachbauen.

    Das Addon trägt den Bildern feste Inline-Styles (style="width: 1120px; height: 768px;").
    → In dem Fall müssen wir diese Inline-Angaben überschreiben, was nur mit !important und direkterem Selektor geht.

👉 Meine Frage:
Willst du mir einmal den vollständigen HTML-Block (oder einen größeren Screenshot vom Inspektor mit den Bildern und deren Eltern-Container) zeigen? Dann kann ich dir die exakte Zielstruktur basteln, die alles überschreibt.

Oder: Soll ich dir einen universellen Selektor geben, der einfach jedes Bild im Cocoen-Slider zwingt, kleiner zu sein – egal, welche Inline-Styles da drinstehen?
Du:
ich kann leider nichts mehr uploaden, erst wieder in 23 stunden. Also bleibt wohl der Austausch des Widges oder wir versuchen einen unuversellen selctor.
ChatGPT:

Alles klar 👍 dann lass uns das pragmatisch mit einem universellen Selektor lösen. Das schießt einmal über das ganze „Cocoen Before/After“ Widget drüber und ignoriert, was das Plugin selbst setzt.

👉 Probier bitte mal das hier im „Individuelles CSS“ des Widgets:

/* Container-Höhe begrenzen */
.cocoen {
  max-height: 60vh !important;   /* max. 60% der Bildschirmhöhe */
  height: auto !important;
  overflow: hidden !important;
}

/* Bilder im Before/After erzwingen */
.cocoen img {
  max-height: 60vh !important;   /* passt sich dem Container an */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important; /* komplettes Bild, nichts abgeschnitten */
  display: block !important;
  margin: 0 auto !important;      /* mittig, falls kleiner */
}

🔑 Damit:

    der Container selbst wird gedeckelt,

    alle Bilder darin müssen sich diesem Limit anpassen,

    keine Scroll-Leiste, weil overflow: hidden.

👉 Wenn du lieber die randlose Variante (aber mit Zuschnitt) haben möchtest, änder in der letzten Regel einfach

object-fit: contain !important;

zu

object-fit: cover !important;

Willst du, dass ich dir gleich noch eine Kombination schreibe, bei der du per zusätzlicher CSS-Klasse („contain“ vs. „cover“) auswählen kannst, welches Verhalten du bei einem Slider haben willst? Dann könntest du je Widget entscheiden.
Du:
das wäre toll, ist ja auf jeder meiner seiten unterschiedlich. Jetzt sieht es gut aus, weiße Ränder aber eine vernünftige Höhe und beide Bilder sind komplett dargestellt. 1000 dank
ChatGPT:

Sehr gut 🙌 freut mich, dass es jetzt sauber aussieht!
Damit du dir die Arbeit leichter machst und nicht jedes Mal den Code umbauen musst, machen wir dir zwei Varianten – eine für „contain“ (alles sichtbar, mit Rand) und eine für „cover“ (randlos, aber mit Zuschnitt).
Lösung: zwei Klassen

Du kannst in Elementor beim Widget unter Erweitert → CSS-Klasse einfach beforeafter-contain oder beforeafter-cover eintragen.
Dann steuern die Klassen das Verhalten.

/* === VARIANTE 1: Alles sichtbar, evtl. weiße Ränder === */
.beforeafter-contain.cocoen {
  max-height: 60vh !important;
  height: auto !important;
  overflow: hidden !important;
}

.beforeafter-contain.cocoen img {
  max-height: 60vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* === VARIANTE 2: Randlos, gleich hoch, evtl. Bild-Zuschnitt === */
.beforeafter-cover.cocoen {
  max-height: 60vh !important;
  height: auto !important;
  overflow: hidden !important;
}

.beforeafter-cover.cocoen img {
  max-height: 60vh !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

👉 Jetzt hast du volle Flexibilität:

    beforeafter-contain → ganzes Bild, egal welche Größe, aber Ränder möglich.

    beforeafter-cover → Bilder exakt gleich hoch/breit, randlos, dafür wird evtl. was abgeschnitten.

Willst du, dass ich dir noch eine dritte Variante für „volle Höhe ohne Limit“ bastle, falls du mal bewusst ein richtig großes Vorher-Nachher haben willst (z. B. ganze Seite)?
Du hast das Limit für GPTS-5 im Free-Plan erreicht.
Du brauchst GPT-5, um diesen Chat fortzusetzen, da er einen Anhang hat. Deine Höchstgrenze wird nach 18:40 zurückgesetzt.

danke, das werde ich nicht brauchen. Du hast mir sehr geholfen, Bis zum nächsten Mal, liebe Grüße
ChatGPT kann Fehler machen. Überprüfe wichtige Informationen. Siehe Cookie-Voreinstellungen./* End custom CSS */