Angualr und Zoomen

[Lowterm]

Hallo zusammen,

ich habe da ein Problem mit dem Vergrößern eines Bildes im Browser. Ich zoome via JS (in Angular) ein beliebiges Bild, solange bis das Bild großer als der Anzeigebereich des Browsers ist. Bis dahin ist auch alles gut. Das Problem ist, dass man nun nur nach rechts scrollen kann und der Linke Bereich des Bildes, der sich nun außerhalb des Browser-Sichtbereches befindet, nicht mehr zu sehen ist und der Scrollbalken auch bereits ganz links steht und man kann auch nicht mehr weiter nach links scrollen, um das restliche Bild zu sehen.

Gibt es einen Trick, wie man handhaben kann oder mit css?

      :host {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }

      .scroll-container {
        flex-grow: 1;
        overflow: auto;
        -ms-overflow-style: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .zoom {
        display : flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        text-align: center;
        vertical-align: middle;
        color: white;
        background: rgba(0,0,0,0.29);
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

Liegt es eventuell an dem bereits verwendeten CSS?

Gruß

[Gunnar Bittersmann]

@@Lowterm

Ich zoome via JS (in Angular) ein beliebiges Bild, solange bis das Bild großer als der Anzeigebereich des Browsers ist.

Da steckt wohl schon der Fehler. Ein Bild zu zoomen scheint mir nichts zu sein, was man mit JavaScript tun sollte.

Wo kann man sich das ansehen?

Kwakoni Yiquan

[Rolf B]

Hallo Lowterm,

Wo kann man sich das ansehen?

Weil - reine CSS Styles zu betrachten, ohne zu sehen, auf welches HTML sie wirken und wie Du mit JS dazwischen grätschst, das ist zwecklos. Denn dein CSS zoomt erstmal nichts, scheint mir. Da muss noch mehr sein.

Ich zoome via JS (in Angular) ein beliebiges Bild, solange bis das Bild großer als der Anzeigebereich des Browsers ist.

Und das tust Du weshalb? Was ist der fachliche Anwendungsfall, um den es hier geht? Geht es Dir darum, das Bild bildschirmfüllend zu bekommen? Oder ist das eine generelle Zoomfunktion für einen Bilderviewer und wir betrachten den Sonderfall, dass das Bild dabei größer als der Viewport wird?

Rolf