CODEWITHSUNDEEP
javascriptcss
rel1x
rel1x

Reputation: 2441

Can't scroll image to the top if zoom it using CSS

I created an image view component with buttons to rotate, zoom in and zoom out. When you click a button it adds CSS transform to the image.

For some reason, when I zoom the image, I can't scroll it to the very top or left corner. I tried to add transform-origin: top left; to the image, and it fixes zoom, however, it breaks rotation. How can I solve this issue?

You can see my code here https://codesandbox.io/s/delicate-star-eitj3s?file=/src/app/app.component.ts

EDIT: transform-origin: top left; makes the image stick to the top left corner, but I need to keep the image in the center. Is it possible to fix the scroll and keep the origin for the image transformations in the center?

Upvotes: 5

Views: 1689

Answers (3)

the Hutt
the Hutt

Reputation: 18408

We can use height and width for zoom, and transform for rotation. With display:flex image can be kept at center. Demo

.image-viewer {
  display: flex;
  overflow: auto;
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

.image-viewer img {
  margin:auto;
  width: 70%;
  height: 70%;
  transition: 0.3s;
}

.image-controls {
  width: 100%;
  text-align: center;
}

.image-controls button {
  transition: opacity 0.2s;
  opacity: 0.8;

  &:hover {
    opacity: 1;
  }
}


 private transformImage(): void {
    this.renderer.setStyle(
      this.image.nativeElement,
      "transform", `rotate(${this.angle}deg)`
    );
    this.renderer.setStyle(
      this.image.nativeElement,
      "width", `${100 * this.scale}%`
    );

    this.renderer.setStyle(
      this.image.nativeElement,
      "height", `${100 * this.scale}%`
    );
    /*this.image.nativeElement.scrollIntoView({
      behavior: "smooth",
      inline: "center",
      block: "start"
    });*/
  }

Upvotes: 2

Ali Demirci
Ali Demirci

Reputation: 5442

  rotate(): void {
    this.angle = this.angle + 90;
    this.transformImage("rotate");
  }

  private transformImage(transformType?: string): void {
    switch (transformType) {
      case "rotate":
        this.renderer.setStyle(
          this.image.nativeElement,
          "tranform-origin",
          "center center"
        );
        break;
      default:
        this.renderer.setStyle(
          this.image.nativeElement,
          "tranform-origin",
          "top left"
        );
        break;
    }

    this.renderer.setStyle(
      this.image.nativeElement,
      "transform",
      `rotate(${this.angle}deg) scale(${this.scale})`
    );
  }

codesandbox

Upvotes: 0

Ritesh Singh Rajput
Ritesh Singh Rajput

Reputation: 339

you are right.transform-origin: top left; is the solution. Put condition in your transformImage method like below and pass true/false

private transformImage(zoom): void {
this.renderer.setStyle(
  this.image.nativeElement,
  "transform",
  `rotate(${this.angle}deg) scale(${this.scale})`
);
if (zoom) {
  this.renderer.setStyle(
    this.image.nativeElement,
    "transform-origin",
    `top left`
  );
}

}

https://codesandbox.io/s/practical-night-n71z3q?from-embed

Upvotes: 0

Related Questions