"Wichtiger Teil" Bereich definieren und im Bildbereich verschieben

[Kronos]

Hallo zusammen,

ich versuche mal mein Problem etwas zu bescreiben:

Ich habe eine Bildgröße definiert: 2560 x auto | Proportional | Zoom: 0
Im Frontend wird das Bild "ce_image" dann mit width: 100% und height: calc(100vh - 70px) dargestellt.
Soweit so gut.

Nun hab ich aber einige Bilder, bei denen im unteren Drittel ein wichtiger Bereich ist. Kann auf einem großen Monitor gut aussehen, aber auf einem 13" Notebook etc. ist dann der wichtige Teil ausserhalb der Sichtweite.
Diesen markiere ich nun im Backend in der Dateiverwaltung im Bild.
Wenn ich nun den Zoomlevel in der Bilddefinition ändere, zeigt es das Bild nicht mehr in width: 100% an.

Was ich mir nun vorstelle ist, dass das Bild nun im Zoomlevel = 0 soweit hochrutscht, dass der markierte Teil mittig sichtbar ist.

Hat jemand ggf. eine Idee?

Danke und viele Grüße,
Tobi

[Spooky]

Bei "Proportional" wird das Bild nicht beschnitten, also der wichtige Teil ist dann irrelevant.

[Kronos]

Aber selbst bei den anderen Optionen, wird es nicht passend geschnitten

[Spooky]

Das Bild wird nur beschnitten, wenn folgendes zutrifft:

• Größenänderungsmodus: Exaktes Format
• Breite: definiert
• Höhe: definiert
• Ausgabeseitenverhältnis unterscheidet sich vom Quellseitenverhältnis - oder Zoom Level ist größer als 0.

[Kronos]

Das Bild wird nur beschnitten, wenn folgendes zutrifft:

• Größenänderungsmodus: Exaktes Format
• Breite: definiert
• Höhe: definiert
• Ausgabeseitenverhältnis unterscheidet sich vom Quellseitenverhältnis - oder Zoom Level ist größer als 0 und es ist ein Wichtiger Teil definiert.

Ja.
Aber wenn ich nun Zoom auf 60 setze, wird es auch schön beschnitten.
Sieht dann auch in 13" Monitor gut aus.
Sehe ich es mir nun am 27" an, ist bei 100vh - 70px unten ein weißer Bereich
Das soll natürlich nicht so sein und das Bild soll unten aufgefüllt sein, bzw. eigentlich nicht beschnitten, sondern nur der markierte Bereich in den sichtbaren Bereich geschoben

- - - Aktualisiert - - -

Ja.
Aber wenn ich nun Zoom auf 60 setze, wird es auch schön beschnitten.
Sieht dann auch in 13" Monitor gut aus.
Sehe ich es mir nun am 27" an, ist bei 100vh - 70px unten ein weißer Bereich
Das soll natürlich nicht so sein und das Bild soll unten aufgefüllt sein, bzw. eigentlich nicht beschnitten, sondern nur der markierte Bereich in den sichtbaren Bereich geschoben

Kann ich den Bereich auslesen, auf den sichtbaren Bereich umrechnen und dann irgendwie per JS oder CSS in den sichtbaren Bereich ausmitteln?

[Spooky]

Poste mal einen Link zur Seite, damit man vielleicht besser versteht was du genau meinst.

[Kronos]

Poste mal einen Link zur Seite, damit man vielleicht besser versteht was du genau meinst.

Ich zeig mal ein paar Screenshots

#1.png

#2.png

#3.png

[Spooky]

Du hast "An Rahmen anpassen" gewählt und keine Höhe definiert. Da wird nichts beschnitten - siehe https://community.contao.org/de/show...l=1#post590709

[Kronos]

Du hast "An Rahmen anpassen" gewählt und keine Höhe definiert. Da wird nichts beschnitten - siehe https://community.contao.org/de/show...l=1#post590709

Doch, wird es
Höhe kann ich so nicht definieren, da ich calc(100vh - 70px) habe

[Spooky]

Doch, wird es

In wie fern wird das Bild beschnitten? Es wird nur auf die angegebene Breite skaliert von Contao.

[mlweb]

Ich denke auch ein Link zur Seite wäre interessant.
Wie willst Du die Bilder verwenden, als Hintergrund bzw. was willst Du layouttechnisch genau erreichen.

[Kronos]

In wie fern wird das Bild beschnitten? Es wird nur auf die angegebene Breite skaliert von Contao.

Vergleiche #1 und #3...
im #3 siehst du unten den weißen Rand, das ist genau der Beschnitt

[Kronos]

Ich versuchs nochmal zu beschreiben :-D

Bild Soll fullscreen Höhe: (100vh - 70px) und Breite: 100% dargestellt werden.
Ausgangsbasis dieses Bild. Der rot markierte Rahmen soll darstellen, was "wichtig" auf dem Bild wäre

Bild#1.png

Ansicht auf 13" Monitor aktuell, ohne Beschneidung etc:

Bild#2.png

Wie soll es nun am 13" Monitor aussehen? Das Bild soll nun soweit hoch (oder runter) gerutscht werden, dass der wichtige Teil sichtbar bzw. mittig ist.
Sollte es mittig nicht gehen, weil dann unten oder oben ein weißer Rand entstehen würde, dann nur soweit dass es top oder bottom = 0 ist

Bild#3.png

Wenn ich nun den Beschneidungsmechanismus von Contao nutzen möchte, klappt das aber so nicht.
Weil ich immer einen Zoomlevel angeben muss und dieser evtl. bei einem Bild passt, beim anderen Bild benötige ich dann etwas mehr Zoom oder weniger.
Zudem muss ich dann immer in einem Seitenverhältnis den wichtigen Teil markieren.

Cool wäre also nun, wenn ich den wichtigen Teil so wie im ersten Bild mit dem roten Rahmen markieren kann.
Per CSS und oder JQuery dann anhand diesem Wert das Bild zurecht rutschen kann, da ich ja immer das Originalbild erhalte, keinen Zuschnitt. Ich müsste also das Bild nur positionieren.

[zonky]

ggf. hilft Dir die Erweiterung das passgenauer einzustellen: https://github.com/inspiredminds/con...e-alternatives