Bildausschnitt mit Bildeinstellungen ohne Funktion ?

Eine bereits vorhandene Diskussion hilft mir leider nicht weiter.
Worum geht’s ?

Version C3.3.7
In einem dreispaltigen Layout (Responsiv mit Layout-Builder) habe ich im Hauptspalten-Artikel ein Bildelement eingefügt, das auch soweit brav sein Bildchen zeigt.

Nach meinem Verständnis kommt „Responsiv” erst richtig zur Geltung, wenn die unter
Elementtyp / Bild
angebotenen Einstellungen nutzbar sind.

Leider gelingt es mir nicht mit den folgenden Einstellungen

Bildbreite und Bildhöhe
- | 130 – Links | Mitte

das erwartete Ergebnis* zu erzielen. Aber auch anderere Eingaben bleiben ohne jede Auswirkung, das Bild (selbst ist 615x130) wird gnadenlos bei jeder Viewport-Verkleinerung proprtional verkleinert, womit das Layout im A. ist.

*das Bild behält seine Höhe, wird aber zunehmend schmaler und zentriert auf die linke Bildmitte

Kann mir irgend jemand verraten warum folgende Versprechung partout nicht umgestzt wird ?
„Exaktes Format
Links | Mitte = Erhält den linken Teil eines Querformat-Bildes und den mittleren Teil eines Hochformat-Bildes.“

Das wäre einfach nur schön gewesen - so wie ich es normaler Weise von Contao gewohnt bin.

Oder habe ich das komplett falsch verstanden, bzw. einen Konfig-Fehler gemacht ?
Allerdings habe ich keinerlei Ideen mehr, was noch auszuprobieren wäre ;-((

controllo - ratlos

Hast Du einen Link zum Problem? Es mag an der Uhrzeit liegen, aber ich habe keine Voprstellung, wie Du Dir Dein Endergebnis vorstellst.

Zitat:

---

Zitat von controllo

Oder habe ich das komplett falsch verstanden, bzw. einen Konfig-Fehler gemacht ?

---

Du hast es falsch verstanden. Die von dir beschriebene Option macht einfach folgendes: sie erzeugt für das angegebene Bild ggf. ein neues Bild, das zu deinen Einstellungen passt. Also ein Bild, das auf die angegebene Breite und/oder Höhe verkleinert und/oder auf den angegebenen Ausschnitt (Proportional, Rahmen, Links, Mitte, Rechts, Oben, Unten) zugeschnitten wird.

Mit "Responsive" hat das nichts zu tun.

Zitat:

---

Zitat von controllo

*das Bild behält seine Höhe, wird aber zunehmend schmaler und zentriert auf die linke Bildmitte

---

Das machst du per CSS. Beispiel:

PHP-Code:

---

.image_container {
    max-width:100%;
}

.image_container img {
    width:auto;
    height:auto;
    max-width:100%;
    display:block;
} 


---

Zuerst mal DANKE für die Antwort(en).

Also Verstehen und verstanden werden ist schon so ein Kapitel für sich – besonders wenn der Detailteufel seinen Spaß dabei hat.

Leider war meine Formulierung
„das Bild behält seine Höhe, wird aber zunehmend schmaler und zentriert auf die linke Bildmitte”
absolut schlampig – was mir nun klar wird.

Neuer Versuch:
das Bild behält seine Höhe, wobei die sichbare Breite zunehmend schmaler wird, sich also der überflüssige Bildbereich sozusagen hinter den Bildrahmen, ins Unsichtbare bewegt. Der verbleibende Bildanteil zentriert immer mehr auf die linke Bildmitte.

Genau das hast du ja mit der „Zuschnittsbeschreibung” auch dargestellt.

Nun verstehe ich diese Funktion schon im „responsivem” Sinne, denn sie dient doch wohl dazu bei kleineren Viewports die Bilder nicht hirnlos kleiner zu machen, sondern dabei auf „bildrelevante” Inhalte zu fokussieren und unwichtige Bildteile „abzuschneiden”. M.E. ein sehr userfreundliches Feature.

Meine Gedanke war nun diese Funktionalität im „ganz normalen resp-Layout” zu verwenden (oder sollte ich sagen zu missbrauchen ?).
Pferdefuß ist wahrscheinlich, dass die Bilder von Contao gem. Viewportgröße (zugeschnitten) ausliefert werden und nicht quasi „on the fly” im Browser berechnet werden (immerhin ist ja keinerlei Moo/Js beteiligt). Wahrscheinlich müsste da mal ein Skript ran - dafür ist aber leider mein Tellerrand noch zu hoch.

Deine CSS Tips (danke) entfalten ihre Wirkung immerhin darin, dass jetzt nicht mehr x+y gemeinsam skaliert werden, sonder nur noch x, wie es ja meiner stümperhaften Beschreibung entspricht.

Ziel ist aber die Bild { r a h m e n } breite bei einer Verkleinerung ( f l i e ß e n d ) analog mit der Hauptspalte zu verkleinern, die Bildhöhe aber beizubehalten und weniger wichtige Bildteile abzuschneiden.

Sorry - viel Text - aber es soll ja verständlich werden.

Für eine gewisse Zeit ist hier

(Link wurde entfernt)

das Beispiel zu besichtigen.
Mein Ziel ist, dass z.B. das rechte Turmfragment beim Verkleinern der Seite, langsam verschwindet (abgeschnitten wird) - also OHNE x-Skalierung.

Gruß von controllo

Zitat:

---

Zitat von controllo

Neuer Versuch:
das Bild behält seine Höhe, wobei die sichbare Breite zunehmend schmaler wird, sich also der überflüssige Bildbereich sozusagen hinter den Bildrahmen, ins Unsichtbare bewegt. Der verbleibende Bildanteil zentriert immer mehr auf die linke Bildmitte.

---

Das erreichst du nur kompliziert per CSS + JavaScript (außer du verwendest das Bild als Hintergrundbild und fixer Höhe, dann ist die Sache mit CSS sehr einfach). Mit der Angabe der Bildgröße und des Bildausschnitts in Contao hat das nichts zu tun.

Zitat:

---

Zitat von controllo

Pferdefuß ist wahrscheinlich, dass die Bilder von Contao gem. Viewportgröße (zugeschnitten) ausliefert werden und nicht quasi „on the fly” im Browser berechnet werden (immerhin ist ja keinerlei Moo/Js beteiligt). Wahrscheinlich müsste da mal ein Skript ran - dafür ist aber leider mein Tellerrand noch zu hoch.

---

Nein, nicht gemäß Viewportgröße. Wie schon gesagt, wenn du dort Angaben machst, erzeugt Contao ein neues Bild, das auf die angegebene Breite und/oder Höhe verkleinert und/oder auf den angegebenen Ausschnitt (Proportional, Rahmen, Links, Mitte, Rechts, Oben, Unten) zugeschnitten ist.

Unter Contao 3.4 gibt es von Haus aus "Responsive Images", aber das ist auch nicht wirklich das was du suchst. Dort werden mehrere Bilder erzeugt und im HTML wird definiert, welches Bild bei welcher Viewport Größe angezeigt werden soll.

Zitat:

---

Zitat von controllo

Für eine gewisse Zeit ist hier

http://contao.p248976.webspaceconfig.de

das Beispiel zu besichtigen.
Mein Ziel ist, dass z.B. das rechte Turmfragment beim Verkleinern der Seite, langsam verschwindet (abgeschnitten wird) - also OHNE x-Skalierung.

Gruß von controllo

---

Das könntest du viel einfacher per CSS mit einem Hintergrundbild lösen. Oder muss das Bild im Backend editierbar sein?

Falls sich jetzt jemand fragt: Was will dieser …trollo eigentlich ? Es geht doch.

Genau – es funzt endlich (auch ohne Skript).
Habe gerade noch mal das CSS gecheckt - und dann …


Das CSS sieht nun so aus:

PHP-Code:

---

.image_container img { 
    width:auto; 
    height:auto; 
    Mindestbreite:616px
    max-width:100%; 
    display:block; 


---

Also die Mindestbreite (im Beispiel 615px) muss definiert sein.
Hinterher ist immer alles irgendwie logisch - wenn nur das Vorher nicht so lange dauern würde …

Ich bin erstmal happy,
danke für die ermutigenden Antworten.

Controllo grüßt