Bitte geben Sie einen Grund für die Verwarnung an
Der Grund erscheint unter dem Beitrag.Bei einer weiteren Verwarnung wird das Mitglied automatisch gesperrt.
Untschiedliche Größe der Bilder mobil und Desktop
Hallo zusammen,
Design: Rome, interessiert mich aber generell für alle Designs.
1. Ich füge ein Bild hinzu (zb. 1920px x 1200 px)
2. Per CSS ziehe ich es auf die volle breite
zb so:
/* full width image */
#cc-m-7576891111 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
}
#cc-m-7576891111 img {
width: 100vw;
height: auto; !important;
}
3. mobil hat es jetzt die passende größe und füllt zb. den halben bildschirm aus
4. Am Desktop ist die Höhe aber natürlich riesig
5. Da es mir am Desktop zu hoch ist, habe ich bisher schlichtweg das Bild vorab in der Höhe reduziert. Also zb. einen Auschnitt daraus gemacht. (1920pc x 400 px)
6. Jetzt sieht es am Dekstop super aus. Volle breite und in der Höhe ist nur der halbe Bildschirm gefüllt.
7. Mobil wird dies natürlich angepasst, und das Bild ist ein kleiner schmaler streifen.
soviel vorab...
Ich suche eine Lösung, dass ich ein Bild zb 1920px x 1200px auf die volle breite ziehen kann, damit es mobil auch diese größe hat. Ich für Desktop aber den einen Auschnitt in der Höhe begrenzen kann. Denn ein schmaleres Bild hochladen führt wie oben beschrieben nicht zum erfolg, da dann lediglich am Desktop Ergebnis optimal ist, aber mobil das bild einfach zu schmal wird.
Jemand eine Idee?
Danke und liebe Grüße!

...viel Spaß beim Experimentieren!
Es gibt auch die Methode, ein Spalten- oder Abstand-Element auf fullwidth zu bringen und mit einem Hintergrundbild zu versehen. Hier kann man auch den Ausschnitt bestimmen oder den Hintergrund parallax anlegen.
Beispiele:
- https://redesign-animation.jimdofree.com...dth-animations/ oder
- https://redesign-parallaxtest.jimdo.com/
Viel Spaß beim Experimentieren!
LG, az
PS: für die Fullwidth-Darstellungen auf https://redesign-animation.jimdofree.com...dth-animations/ gibt es ein Widget - da muss dann nichts programmiert werden.
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hi AZ,
erstes Feedback: Abstandselement ausprobiert. Schick für desktop, unbrauchbar für mobil?.... denn dort ist ein Abstand ja immer identisch groß (nämlich 5mm gefühlt) - oder denke ich falsch?
Spaltenelement wird nun als nächstens Versucht.
bzgl: PS: für die Fullwidth-Darstellungen auf https://redesign-animation.jimdofree.com...dth-animations/ gibt es ein Widget - da muss dann nichts programmiert werden.
... das verstehe ich nicht ^^ wo gibt es ein fertiges Widget hierfür? Wobei es sich bei der Ansicht ja genau um mein Problem handelt. Schick für Mobil, riesig für Desktop
Es muss mir also irgendwie gelingen, dass das Bild komplett mobil angezeigt wird, und ich am Desktop den Auschnitt wählen kann.
BG
BG

Ich habe so ein Widget programmiert. Das kann ich Dir auf Deiner Seite einrichten, sowas gibt es aber nicht kostenlos.
Abstandelement geht auch mit Hintergrundbildern, muss dann aber für mobil entsprechend formatiert werden (.max-height und .min-height verändern).
Du kannst die Höhe eines Spaltenelements auf auto setzen, wenn Du es mit einer eigenen Klasse versehen hast. Das löst das Problem mit dem Container. Die Ausschnitte des Hintergrundbildes kannst Du mit background-position bestimmen.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hi Az,
danke für deinen regelmäßigen input! Ich "kaufe" deine Diensleitung nicht weil ich zu geizig bin, sondern weil ich die Herausforderungen Stück für Stück meistern möchte.
Das du hier überhaupt supportest finde ich mega!
Vorerst ist es mir nun gelungen einen Parallaxeffekt zu hinterlegen der seinen zweck erfüllt. Dennoch versuche ich mit nun an dem Abstand noch mal und dem Spaltenelement.
Step für Step verstehe ich den ganzen spass :)
Vielen Dank!
Eine Alternative wäre folgende:
Füge ein Bild ein, das auf dem Destkop passt, dann darunter das gleiche Bild (normale Breite ) , das mobile passt, also in zwei Höhen. Dann kannst du die Bilder ein/ausblenden mit folgendem Code im Head:
<style type="text/css">
/*<![CDATA[*/
/* normale Ansicht */
@media (min-width: 768px) {
/* elemente Destkop */
#cc-m-xxxxxxxxxx { display:none; }
#cc-m-oooooooooo { }
/* mobile Ansicht */ }
@media (max-width: 768px) {
/* Elemente Mobil */
#cc-m-oooooooooo { display:none; }
#cc-m-xxxxxxxxxx { }
/*]]>*/
</style>
ich hatte mal eine Testseite erstellt, ohne realen Inhalt, wo ich auf der Startseite so mehrere Element ein/ausgeblendet habe.

Vorsicht bei Parallax in iOS. Fixierte Backgrounds und parallax-scroll wird oft nicht richtig dargestellt. Beispiel:
Das liegt am System. Es gibt aber einen Weg, das zu realisieren. Wie das geht, findet Ihr hier:
https://redesign-berlin-tabtest.jimdo.com/parallax-scroll/
LG, az|addpics|kbj-9-0b0b.png-invaddpicsinvv,kbj-a-6090.png-invaddpicsinvv|/addpics|
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
das mit dem ein/ausblenden ist so eine ( Bastel- ) Sache, wie auch das scrollen.
Ich setzte voll auf Webkeeper, hat einen der tollsten Baukasten im Angebot, inkl. Hosting nur Fr. 15.-- monatlich, da ist Jimdo um Lichtjahre hinterher, da kommt nicht mal WIX nach.
- Allgemeines
- Regeln für die Benutzung des Forums
- HowToDo ( = so geht´s)
- Jimdo User-Forum
- Eure Jimdo-Webseiten - Vorstellungsrunde
- Bugs, Workarounds und Anregungen
- Jimdo-Elemente
- Allgemeines
- Jimdo-Shop
- Jimdo-Specials (Tools, Widgets, HTML und CSS)
- Suchmaschinenoptimierung (SEO)
- Sonstiges
- Tutorials
- "OffTopic"-Themen
- "Übernahme" von Beiträgen aus dem offiziellen Jimdo-Forum...
- Nutzungsbedingungen und Haftungsausschluss
- Jimdo-Blog
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!