Automatisches Anpassen der Bilder auf Zellenstilebenen an verschiedene Displaygrößen
Autor: Sr. Eva-Maria K.
Visited 2072,
Followers 1,
Udostępniony 0
Hallo!
Ich arbeite gerade an einem neuen Design für meine Website. Nun will ich auch die Möglichkeit nutzen, auf "Zellenstilebene" Bilder zu hinterlegen, die die volle Browserfensterbreite mit Parallaxe-Efekt ausfüllen. In der Vorschau passen sich die hinterlegten Bilder nicht den verschiedenen Browerfenstergrößen an ... Das wundert mich, denn Bilder auf der "normalen" Seitenebene passen sich den Größen immer automatisch an, auch Bildergallerien tun das.
Muss ich tatsächlich für jede einezelne Browserfenstergrößen angepasste Bildfelder anlegen und dann jeweils unter "Responsive" jeder Displaygröße die passende Größe zuordnen bzw. ausblenden?
LG
Posted on the
Wie hast Du die Bilder im jeweiligen Zeilenstil eingebaut? Hier gibt es ja verschiedene Möglichkeiten, wie z.B. "Wiederholung", "keine Wiederholung" oder auch "an Fenster anpassen" - auch die Ausrichtung des Bildes ist möglich!
Autor
Ich habe "5 - An Fenster anpassen" ausgewählt.
WElches Objekt hast du benutzt für den Zellenstil Hintergrund? Ein HTML-Objekt oder ein Grafikobjekt oder mehrere verbunden oder mehrere sind nebeneinander?
Es kann sich die GRafik nicht anpassen wenn z.B. mehrere Text-Objekte sich darauf befinden und natürlich muss die Hintergrundgrafik sich auch nach den Objekten richten wenn sie sich vergrößern muss die Grafik auch so groß bleiben.
Autor
Das Objekt im Hintergrund ist ein Foto im JPG-Format. Davor habe ich einen kleinen Text, der hineingezoomt wird. Aber auch wenn ich den Text weglasse und nur ein Textfeld mit einigen Absätzen - ohne Text - davor lege, habe ich das gleiche Problem. Auch habe ich verschiedene Einstellungen versucht: Mit Parallaxe-Effekt, umgekehrter Parallaxe-Effekt, fixer Parallaxe-Effekt. Das Bild passt sich nie an das kleinere Display an.
Das einzige ist, wenn ich das Häkchen "Auf das Browserfenster erweitern" herausnehme, dann funktioniert es.
Ist die Seite Online bzw. kannst Du ein Screenshot zeigen?
Autor
Die veränderte Website ist noch nicht online. Aber ich habe 4 Screenshots gemacht. Sie sind im Anhang. Hier ist die WebSite X5-Maske/Zellenstiel
Autor
Hier ist Vorschau 1: 1150 PX
Autor
Hier die Vorschau 2: 750 Px
Autor
Hier die Vorschau 3: 480 Px
Autor
Noch mal Vorschau 1: 1150 px
Du hast wahrscheinlich einen riesigen Abstand nach oben eingefügt bei dem Text-OBjekt oder? Weil ansonsten kann ich mir den Abstand nicht erklären oben. Die Grafik kann sich nicht von der Höhe anpassen und wenn du es verkleinerst wird der RAnd nicht mit verkleinert sondern behält die Maße!
WEnn dann müsstest du ein HTML-Objekt einbinden oben und den Rand beim Text-OBjekt löschen und bei einem niedrigen Breakpoint das HTML-Objekt ausblenden lassen, damit die Schrift nach oben rutscht.
Hast Du schon mal probiert - so wie Andreas vorschlug - den Zeilenabstand im Textobjekt zu verringern? Normalerweise müsste es doch funktionieren?
Ich habe es mit einem transparenten BildObjekt gemacht und den Text in der 2 Zeile (Text Objekt) und die miteinander verbunden...
Gruß
Cookie
Autor
Hallo! Vielen Dank für Eure Antworten. Ich habe den Rat von Andreas und auch von Cookie ausprobiert. Als HTML-Objekt habe ich die Option "HTML-Code" benutzt und nur eine gewissen Höhe vorgegeben. Aber das hat auch nicht geklappt. Oder meintest Du was anderes mit dem "HTML-Objekt"?
Auch die Idee mit dem Tranparenten Bild hat leider nicht geklappt.
Wie groß ist das Bild das du als Hintergrund verwendest? Versuch mal das Bild(falls nicht vorhanden) auf 1920*1080 zu skalieren und stelle mal im Zeilenstil auf “nicht wiedeholen“ ein.
Autor
Hallo Martin,
ich kann das Bild nur entweder auf 1920*1280 oder auf 1620*1080 skallieren - und die Seitenverhältnisse richtig zu erhalten. Beide Varianten habe ich ausprobiert mit "keine Wiedrholung". Leider keine Veränderung ...
Kannst Du vielleicht einen Link mit deinem Projekt (iwzip) mit Wetransfer posten?
https://wetransfer.com/ (Anstelle der Email wählst Du Link aus)
Kannst du im Photoshop nicht ein bisschen von oben und unten weg schneiden und das Bild dann auf 1920x1080px machen? Mein transparentes Bild hat auch eine grösse von 1920x1080px.
Keine wiederholen und am Fenster anpassen, Ausrichtung oben.
Der Nachteil vom verbinden der 2 Zeilen es schneidet trotzdem ein bisschen ab aber nur ganz wenig. Wenn du es nicht verbindest verkleinert sich das Bild.
Schau mal hier
Gruß
Cookie
Autor
@Cookie, ich habe das so gemacht, wie Du geschrieben hast. Leider funktioniert es immer noch nicht. Was für ein Betriebssystem hat Dein PC, Mac oder Windows (10)? Manchmal habe ich das Gefühl, dass das Vofhandensein bestimmter Software und auch das Betriebsystem solche Funktionen beeinflussen können.
@Martin, ich muss zugegeben, dass ich mich etwas schwertue, meine Projektdatei in so einem öffentlichen Forum "preiszugeben". In Bezug auf Incomedia ist das für mich kein Problem. Sorry
Ich denke, ich setze meinen Beitrag jetzt doch noch mal privat, damit die Fachleute von Incomedia sich das noch mal anschauen. Ich danke Euch ganz herzlich für Eure tolle Unterstützung!!
Hallo Srq. Eva-Maria
Ich habe Windows 10.
Könntest du mal die Seite online stellen als testseite und gib uns die Adresse damit wir es anschauen können. Glaube nicht dass inco dir weiter hilft wenn du damit kommst.
Gruß
Cookie
Ahh
Mit Parallaxe Effekt geht das nicht... leider.
Autor
Jetzt funktioniert es tatsächlich!!!!!!! Mit Paralaxe-Effekt geht es nicht. Aber mit dem transparenten Bild, wie Cookie oben beschrieben hat und eben ohne Parallaxe-Effekt funktioniert es!
DANKE AN EUCH ALLE!!