You are unable to move the image to the top of the screen after zooming it with CSS

I implemented an image viewer component with interactive buttons for rotating, zooming in, and zooming out. Upon clicking a button, CSS transform is applied to the image.

However, I encountered an issue where, when zooming the image, it cannot be scrolled all the way to the top or left corner. I attempted to resolve this by adding transform-origin: top left; to the image, which fixed the zoom but caused rotation problems. How can I address this issue effectively?

The code for my implementation can be viewed here: https://codesandbox.io/s/delicate-star-eitj3s?file=/src/app/app.component.ts

EDIT: transform-origin: top left; successfully anchors the image to the top left corner, but I prefer to keep the image centered. Is there a way to fix the scrolling while maintaining the transformation origin at the center of the image?

javascriptcss

Answer №1

To achieve zoom functionality, we can utilize height and width properties, while for rotation, we can make use of the transform property. By employing display:flex, we can ensure that the image remains centered on the screen. Check out this 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"
    });*/
  }

Answer №2

Indeed, the solution lies in using transform-origin: top left; Make sure to include a condition in your transformImage method as shown below and pass true or false accordingly

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`
  );
}

}

Explore more here

Answer №3

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

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

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

View in codesandbox

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NavLinkButton - add style when active or selected

I'm working with a list of NavLinks: const users = Array.from(Array(5).keys()).map((key) => ({ id: key, name: `User ${key}`, })); <List> {users.map((user) => { return ( <ListItem disablePadding key={user.id}> ...

javascriptreactjsmaterial-uireact-router-dom

Tips for aligning the camera to ensure the object maintains a consistent pixel width and height on the screen

I am grappling with a challenge that I'm unsure how to approach, hoping someone can offer me a clue on the solution. My goal is to position the camera at a specific z index so that a cube appears on the screen with consistent pixel dimensions regardl ...

javascriptmaththree.jsgeometry

Utilize Angular to transform a standard text string within a JSON object into a properly formatted URL

Welcome to my first Stack Overflow question! I usually find the answers I need on my own, but this time I could use some guidance as I delve into Angular. I have a directive that pulls the name and URL from a JSON object and generates HTML with the name a ...

javascriptangularjsjson

JavaScript quiz featuring randomized questions with selectable radio buttons

I need assistance in creating a feature on my webpage where users can select the number of questions they want to answer (ranging from 1 to 10). The selected number of questions should then be displayed randomly, without any duplicates. I am not very famil ...

javascriptjqueryhtml

Generating a unique serial ID using Angular/JS

I am in the process of developing a function that will create a unique serial id by replacing a string with the format; xxxx-xxxx-xxxx-xxxx. The desired outcome is a serial like this: ABCD-1234-EFGH-5678, where the first and third parts consist of letters ...

javascriptangulartypescriptrandomuuid

Having difficulty launching a new window within an app built with Electron and Nexjs (Nextron)

Attempting to launch a (Nextjs-generated) page in a new window is causing an error message to appear: Uncaught ReferenceError: global is not defined Here is the full error: react-refresh.js?ts=1665849319975:10 Uncaught ReferenceError: global is not de ...

javascriptreactjsnext.jselectron

Managing State in a React Drawer Interface

One day, I decided to create a page with a Sidebar on the left, an Appbar at the top, and a content area. Initially, everything functioned seamlessly as one enormous component. However, as we all know, React's charm lies in breaking down various eleme ...

javascriptreactjsmaterial-uidrawer

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

I need to know how to send a "put" request using JavaScript and Ajax

My task involves programmatically updating a spreadsheet using my code. I am able to write to a specific cell within the spreadsheet with the following function: function update(){ jQuery.ajax({ type: 'PUT', ...

javascriptjqueryxmlajaxgoogle-sheets

Differences in accessing the previous state between React's useCallback and useState's setState(prevState)

It has come to my attention that useCallback functions recreate themselves when their dependencies change, acting as a sort of wrapper for memoizing functions. This can be particularly useful for ensuring access to the most up-to-date state in useEffect ca ...

javascriptreactjsreact-native

Best practice for retrieving the $scope object inside the ng-view directive

Check out my plunk. Incorporating ngRoute into my project. I want to increase a value using ng-click, and upon clicking "Show total", the ng-view template should display the updated value. However, it seems like the scope is not being accessed as expecte ...

javascriptangularjsangularjs-scopeng-view

Storing deeply nested arrays of objects with Mongoose leads to MongoDB storing empty objects

Here's the issue I'm facing: I am trying to save nested objects with mongoose in mongodb, but when I save them, the nested objects end up empty. I have attempted various solutions found online, such as pushing objects and populating, but none o ...

javascriptnode.jsmongodbexpressmongoose

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through

I am working on making this logo align perfectly with all screen resolutions and browsers, while ensuring it stays at the exact center (both vertically and horizontally) of the #container. If the resolution drops below 320px, I want the company name to dis ...

htmlcssresponsive-design

CSS - Overlapping <a> elements when resized

My buttons have the following properties: background: #c6cdf2; border: 1px solid #8896e4; border-radius: 3px; padding: 6px 10px 3px 10px; When the page resizes, the buttons don't respect the padding and start overlapping each other. https://i.sstat ...

htmlcssresponsive-design

In my app.post request in node.js and express, the body object is nowhere to be found

Having an issue with node.js and express, trying to fetch data from a post request originating from an HTML file. However, when I log the request, the req.body object appears empty. I've added a console.log(req.body) at the beginning of my app.post(" ...

javascriptnode.jsexpress

Is there a chart tool that allows for editing graphs by simply dragging points?

Currently, I am in search of a charting library that is preferably JavaScript-based (although Flash could work as well) and has the capability to display time series data as a line chart. Additionally, I need this library to allow users to drag points on t ...

chartsjavascript

Tips for extracting text from a textarea while retaining newline characters:

When using jquery, my goal is to retrieve the text from a textarea element with new lines represented as \n instead of br tags. However, I encountered an issue where Firefox debugger does not display the \n or br characters when I select it and r ...

javascriptjqueryhtml

How can you locate and emphasize specific text within various elements using JavaScript?

Created a script to highlight linked text in another HTML page. <p>Click <span class="f1"><a href="#myModal" data-reveal-id="myModal">here</a>/span></p> <div class="leftspread"> <p class="table-caption"& ...

javascriptjqueryhtmlcss

Can you use an ajax post to search for a boolean in MongoDB without converting on the server side?

I am facing an issue with my mongo collection that has documents containing a boolean field: { name : "Tom", active : true } { name : "Jerry", active : false } In my application's client side, there is an element that triggers an AJAX po ...

javascriptajaxmongodb

The concept of "Object Reference Pattern" in the world

Currently, I am working with a single object: var callback = { onValueChange: function () { }, onTabPressed: function () { }, onFocus: function () { } }; In my webpage, I have various editors such as textEditor and numericEditor, and I bind t ...

javascriptperformanceclosures