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ß