draggable elemente auf Website einbinden für ein bissl gamification

[Rolf B]

Hallo calimero,

Die Elemente verändern ihre Größe, wenn ich sie zum Beispiel in die Ecke oben rechts schiebe. Was muss ich verändern, damit die Größe der Elemente gleich bleibt?

Ja, hm, der Effekt ist mir auch noch nicht begegnet. Offenbar verkleinert der Browser das Bild, wenn Du es nach rechts und nur nach rechts aus dem Viewport schieben willst. Und der width:fit-content des draggable div macht dann alles kleiner.

Ich finde im Moment nur eine Umgehungslösung: Verpasse dem style-Attribut des jeweiligen .draggable div die gewünschte width für das Bild, und gib dem Bild im CSS eine Breite von 100%. Dann bleibt die Größe fix.

Und wo kann ich generell die Bildgröße einstellen? Muss ich die Bilder schon in der entsprechenden Größe hochladen?

Du solltest die Bilder nicht zu groß hochladen. Der Teller ist gruselig, 3800x3200px bei 600KB Dateigröße. Du kannst grob von 96 Pixel pro Zoll ausgehen, die für die Anzeige gebraucht werden. Soll das Bild auf dem Desktop-Bildschirm ca 10cm breit sein, sind das ca. 4 Zoll oder 400 Pixel. Wenn das Bild dann mit 800 Pixeln Breite hochgeladen wird, ist das das doppelte und ein Retina-Display freut sich. Dafür kannst Du dann eine stärkere Kompression einstellen, damit die Datei nicht so groß wird. Auf einem Handy ist das Bild sicherlich schmaler, da reicht's dann immer. Und deine Gamification willst Du auf kleinen Viewports eh nicht haben.

Um die angezeigte Breite eines Bildes zu bestimmen, verwendet man NORMALERWEISE das width-Attribut des Bildes oder die CSS-Eigenschaft width. Hier hat das irgendwie mit dem fit-content des div quergeschossen. Dem Bild im CSS ein width:100% zu geben und das div auf die gewünschte Breite zu setzen ist dann der Workaround.

Aber an der Stelle bin ich auch immer auf Kriegsfuß, vielleicht weiß @Gunnar Bittersmann was besseres (außer dem Hinweis, auf diese Sperenzchen ganz zu verzichten, weil sie in dieser Form nicht bedienbar sind).

Rolf