Imagine a scenario where clicking on an image causes it to be rotated or

Could use some assistance figuring out what's missing here.

I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser window after rotation, even if part of the image is pushed outside the viewable area. It's almost there, just need to address the partial overflow issue.

Any ideas on how to resolve this?

Thanks,

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      width: auto;
      max-width: 100%;
      height: auto;
    }
  </style>

</head>

<body>
  <img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/6/6c/Us_flag_large_38_stars.png" style="transform: rotate(0deg)">
  <script type="text/javascript">
    let rotateAngle = 90;


    function rotate(image) {
      image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
      rotateAngle = rotateAngle + 90;
    }
  </script>

  <div class="as-console-wrapper">
    <div class="as-console"></div>
  </div>
</body>

</html>

Answer №1

Your image has a greater width than height and is positioned at the top of the page. When rotating while keeping the center fixed, parts of the image will move out of view due to (width/2) being greater than (height/2) by a significant amount. It helps to imagine swapping the height and width when rotating.

In your case, setting the width to auto means the image will expand to fit its parent container (body).

To maintain the desired width, I am simply adjusting the image downwards at the specified angle in order to shift the center of the image.

let rotateAngle = 90;


    function rotate(image) {
      image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
      rotateAngle = rotateAngle + 90;
      if(rotateAngle % 180 == 0) {
        image.classList.add('pushDown');
      } else {
        image.classList.remove('pushDown');     
      }
    }
img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }

.pushDown{
  margin-top: 25%;
  margin-bottom: 20px;
}
<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/6/6c/Us_flag_large_38_stars.png" style="transform: rotate(0deg)">

<div class="as-console-wrapper">
  <div class="as-console"></div>
</div>

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

Issue with second button in Angular Onclick() not been resolved

I'm experiencing an issue with the onClick() methods in my code. There are two onClick() methods present on the UI, but when I click on the second one, it does not call the method while the first one does. I am struggling to figure out why this is hap ...

Learn the best way to retrieve the highest number from a Array<String> in TypeScript or JavaScript

Can someone help me create a function in JS or TS that meets the following requirements? I am looking for a functional programming approach. ・Input type: Array(String) ・Output type: string or undefined Examples Input Result ["" ...

error occurred while trying to upload a file

I am encountering an issue while trying to upload a file using PHP. Here is the HTML code snippet: <form enctype="multipart/form-data" id="form" action="action.php"> <input type="file" name="file"/><br/><br/> <input type ...

What is the best way to continuously click a JavaScript link until it disappears?

Many websites utilize single-page pagination to display more content with each click. It can be beneficial to view all the content on one page, such as for web crawling purposes. Much like automatically clicking a button using Greasemonkey, how can JavaScr ...

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

It seems like I might have to take the longer route to solve this issue, but let's give it a shot... I'm facing a challenge when applying CSS to control the opacity of a specific HTML element that acts as a container for a Three.JS scene. In thi ...

React: Trying to use the map function on an empty array will result in an error

I am currently facing an issue while trying to populate a shopping cart with items. Even though I have initialized the cart as an empty array, I keep encountering the following error: TypeError: cart.map is not a function ProductContext.js:34 addItemToCar ...

Can we establish communication between the backend and frontend in React JS by utilizing localstorage?

Trying to implement affiliate functionality on my eCommerce platform. The idea is that users who generate links will receive a commission if someone makes a purchase through those links. However, the challenge I'm facing is that I can't store the ...

Forbidden access error in codeigniter with Ajax request 403

I'm struggling to send a value via Ajax to a Controller file in Codeigniter, but unfortunately I haven't been successful. Despite researching this issue and finding that it has been asked many times before, I still can't seem to find a solut ...

Customize the position values of the Ngx-bootstrap Tooltip manually

I have incorporated ngx-bootstrap into my Angular 4 application. The component I am using is ngx-bootstrap Tooltip: After importing it, I am implementing it in my component's view like this: <button type="button" class="btn btn-primary" ...

The Angulajrjs popup timepicker is not located within the input row

Currently, I am working on creating a popup timepicker within a modal. My main goal is to have the button inside the input field rather than after it. Does anyone know how I can achieve this? Thank you. If you need more context, you can check out my plun ...

retrieve the complete webpage content, encompassing the .html file, images, .js files, css stylesheets, and more

I'm currently working on a project and could use some assistance. Is there a method available to download an entire page, including the .html file, images, .js files, css, etc., using PHP, JavaScript, or AJAX? <html> <body> & ...

Encountering an issue: Unable to initiate a local server when running `npm start`

Currently diving into the world of React, I successfully set up a React app. However, upon running npm install after typing cd davidsapp, I encountered numerous warnings and errors. Subsequently, when issuing the command npm start, all of the errors are di ...

JavaScript encountered an error stating "phone is not defined" due to an uncaught ReferenceError

Whenever I click on the Phone Number, it displays an error message saying that the function is not defined. How can I fix this issue? Thank you in advance! Here's the code snippet: <div class="product-label"> <h4><?php echo $p["Fu ...

How can we detect if the pressing of an "Enter" key was triggered by an Angular Material autocomplete feature?

Currently, I have incorporated an Angular Material Autocomplete feature into my search bar. When a user types in their query and presses the Enter key, the search is executed as expected. Nevertheless, if the user decides to select one of the autocomplete ...

Render multiple checkboxes with values from an array of objects passed as a prop to a child component using a v

I am facing an issue with my Vue components 'Parent' and 'Child'. Each child component has a checkbox with a :checked prop. In the Parent component, I iterate through an array of objects and pass props to the child. Although I can emit ...

What is the best way to link a single post to a collection of posts?

I am currently working on building a basic blog using PHP. My goal is to create a link from a post to a list of all posts on the blog, similar to the example shown below: Example of how I plan to display posts and a post viewer There are two distinct par ...

Exploring the JSON object tree through recursion using underscore and backbone

If I have a JSON object with nested arrays of unknown depths and I want to pass each array into a _.template function, how can I make that happen? Here's an example of what my JSON object might look like: $start_elements = array ( array( ...

adding content to div is becoming less speedy

Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...

Step-by-step guide on validating a user in Joomla using AJAX and jQuery

Is there a way to authenticate a user in Joomla through an AJAX call? I want to implement an error effect if the login is incorrect and redirect the user upon successful authentication. I am specifically interested in using JQuery's .ajax API for thi ...

Troubleshooting: Custom checkbox using CSS ::before does not display properly on Firefox and Edge browsers

Encountering a frustrating CSS challenge while working on a project that needs to be compatible across various browsers. Specifically, I'm having issues with custom styling for checkboxes. Despite following recommendations to use a ::before pseudo-ele ...