Untschiedliche Größe der Bilder mobil und Desktop

20.10.2019 03:39
avatar  D.F.
#1
D.

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!


 Antworten

 Beitrag melden
21.10.2019 11:14
avatar  az_
#2
avatar
az_

...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


 Antworten

 Beitrag melden
22.10.2019 01:15
avatar  D.F.
#3
D.

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


 Antworten

 Beitrag melden
22.10.2019 16:04
avatar  az_
#4
avatar
az_

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


 Antworten

 Beitrag melden
25.10.2019 13:37
avatar  D.F.
#5
D.

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!


 Antworten

 Beitrag melden
25.10.2019 22:17
#6
R.

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.


 Antworten

 Beitrag melden
26.10.2019 13:38
avatar  D.F.
#7
D.

Dank dir! Das hatte ich auch schon überlegt per mobil auslbenden. Vorerst werde ich glaube ich per Parallax arbeiten und lege per css die größe für mobil fest, das klappt bisher ganz gut.
Aber das ist ebenfalls eine gute alternative!

BG


 Antworten

 Beitrag melden
27.10.2019 23:48 (zuletzt bearbeitet: 27.10.2019 23:59)
avatar  az_
#8
avatar
az_

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


 Antworten

 Beitrag melden
28.10.2019 13:29
avatar  D.F.
#9
D.

Ich hatte hier bisher "scoll" für mobile gesetzt, damit das Scollen am Handy deaktiviert ist.


 Antworten

 Beitrag melden
28.10.2019 23:11
#10
R.

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.


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!