div/img mit Regler auf Bild scrollen

  • Guten Morgen Sempervivum, das hat wunderbar funktioniert =)

    Jetzt habe ich leider noch ein kleines Problem für dich ^^ Da sämtliche Bildformate auf 30.000 px beschränkt sind, muss ich mein Bild teilen, und hab somit zwei Bilder, welche ich nahtlos nacheinander in den div packen muss. Bzw. in das SVG. Geht das überhaupt so einfach?

  • Allzu schwer ist das auch nicht zu lösen, wir legen einfach die beiden Bilder in einen weiteren Container und beziehen die weiteren Operationen auf diesen:

    Code
    1. <div id="pano-outer">
    2. <div id="pano-inner">
    3. <!-- Hier zunaechst keine src-Attribute angeben -->
    4. <img id="pano-img">
    5. <img id="pano-img-2" style="filter: grayscale(1);">
    6. </div>
    7. </div>

    (filter nur testweise, damit ich die Bilder auseinander halten kann).


    Und das CSS dafür:

    Code
    1. #pano-inner {
    2. /* Der Container muss seine Groesse abhaengig vom Inhalt einstellen,
    3. daher verwenden wir inline-flex */
    4. display: inline-flex;
    5. }

    Dann die weiteren Berechnungen auf den inneren Container beziehen:

  • Mir scheint, es liegt am HTML und CSS. Nimm das div.frame aus dem div.stadion heraus und platziere es dahinter, so dass im div.stadion nur das div#bande liegt. Und dann ändere das CSS so:

    Code
    1. div.stadion {
    2. overflow-x: scroll;
    3. }
    4. #bande {
    5. /* width: 100%; */
    6. display: inline-flex;
    7. /* overflow-x: scroll; */
    8. }

    Dies habe ich nur mit dem HTML-Inspektor getestet, wenn es nicht funktioniert, werde ich mir eine neue Testseite mit deinen Namen bauen.

  • Es funktioniert einwandfrei! Herzlichen Dank für all deine Mühen!

    Ich bin mir sicher, das ist nicht das letzte mal das du von mir liest. Zumindest, solange du noch Geduld hast :D

    Spätestes nach meinem StaatsEx werd ich mich JS widmen, aber ich glaube vorher sollte ich mir HTML und CSS nochmal genauer anschauen...