Ankündigung

Einklappen
Keine Ankündigung bisher.

Background x auf Breite skalieren y in % verzerren

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Background x auf Breite skalieren y in % verzerren

    Ich möchte eine Hintergrundgrafik SVG 400x400 Bildgröße frei skalierbar auf einem Steuerelemente darstellen. Das besagte Element ist ein Range-Inputfeld ( diese Schieberegler ). Dieses Feld lässt sich frei mit CSS gestalten, so dass es auf unterschiedlichen Plattformen möglichst gleich aussieht.

    Im speziellen Fall hab ich vor einen "Ladezustand" darzustellen indem ich den Hintergrund gestalte per Background-Image mit einem SVG.
    Ich habe dabei folgendes Problem. Das Bild ( SVG ) soll in der Höhe automatisch skalieren aber in der Breite nur Prozentual, sodass man durch die Steuerung der %-Breite immer einen Ladezustand darstellen kann. Kongret soll hier der Ladezustand einer MP3 mit Javascript ermittelt werden. Der JS-Teil ist allerding nicht das Problem sondern die Darstellung per CSS.

    Kommt jemand mit so einer Anforderung zurecht und hat Lösungsansätze oder evtl Beispiele wo ähnliches umgesetzt wurde?
    Mit 2 Div-Elemente kann man diese Anzeige auch erreichen aber eben nicht mit einem wie bei dem Range-Imput-Feld


  • #2
    Wäre hier das Element Meter nicht die bessere Wahl?
    https://wiki.selfhtml.org/wiki/HTML/Formulare/meter

    Kommentar


    • #3
      Und wie wähle ich per Anfassen die Position? Genau das ist der Sinn der Range. Ebenso kann ich auf verschiedene Positionen klicken. Falls es keine CSS-Möglichkeit gibt mit Background zu skalieren, muss ich mit Divs und JS ein eigenes Steuerelement bauen. Das sollte aber der letzte Ausweg bleiben.

      Kommentar


      • #4
        Wie sieht denn dein Hintergrundbild aus. Je nach dem kann man es ja auch entsprechend abdecken um einen Fortschritt anzuzeigen, aber dazu müsste man natürlich wissen wie du dir das vorgestellt hast, vielleicht auch an 2 Bildern, 100% und 50% Fortschritt.

        Kommentar


        • #5
          Du meinst ich müsste ein Bild erstellen, was die maximale Größe des Hintergrundes abdeckt und dann einfach ein negatives x entsprechend verschieben bis die Position komplett deckt bei 100%?
          Ich hab bei Bildern eigentlich freie Wahl, da ich es selber erstelle. Ich hatte an SVG gedacht, da Datensparsam. Könnte ich notfalls auch per Hand erstellen. Überleg auch noch einfach die Koordinaten bzw die Skalierung des SVG direkt mit JS zu steuern um so die Abdeckung zu steuern, aber dafür brauch ich wieder die Maße des Elementes vom Range.

          Kommentar


          • #6
            Die Masse ergeben sich aus dem Hintergrundbild. du kannst auch size cover oder sonstwas nehmen, da ist so vieles möglich, aber wenn du selber nicht mal Bild hast warum denn dann eins nehmen. Für einen Fortschrittsbalken braucht du es jedenfalls nicht. Hast du dir mal die Beispiele zu meter angesehen, was da alles machbar ist.

            Kommentar


            • #7
              Ich glaub jetzt reden wir aneinander vorbei. Schau Dir bitte nochmal genau meine Einleitung an.

              Kommentar


              • #8
                Habe ich
                Im speziellen Fall hab ich vor einen "Ladezustand" darzustellen indem ich den Hintergrund gestalte per Background-Image mit einem SVG.
                Du hast aber gar kein SVG-Bild.

                Wenn du eins hättest ok, aber da du keins hast, können wir hier auch nicht weiter helfen.
                Und der Rest wurde schon erwähnt, nämlich das dafür gar kein Hintergrundbild nötig ist um den Ladezustand anzuzeigen.

                Kommentar

                Lädt...
                X