What is the best way to adjust the size of an IMG element while ensuring it remains proportionate and in the same position when the window size is altered?

I am currently in the process of developing a GPS-inspired application, and I have encountered a roadblock while attempting to establish 'no-go' zones on the map. My goal is to have the map dynamically resize based on the window dimensions, using percentages of the maximum screen width and height to define the restricted areas. However, the issue arises when resizing the screen, causing the relative positions of the points on the map to shift. At this point, I am more concerned about ensuring functionality across various window sizes rather than the potential distortion of the map.

Here is my current CSS styling:

#map-container {
    display:flex;
    justify-content: center;
}

#lower-map {
    position:absolute;
    transform: rotate(-37.7deg);
    top:25%;
    max-width:50%;
    max-height:50%;
}

Corresponding HTML:

<div id="map-container">
    <img src="/static/images/Lower.jpg" alt="Map of lower floor" id="lower-map">
</div> 

The current JavaScript for marking the no-go areas only functions correctly on my specific screen size and in full-screen mode:

let screenHeight = $(window).height();
let screenWidth = $(window).width();

$('#dot1').css({left: screenWidth*(60.62499999999999/100)-1, top: screenHeight*(35.75240128068303/100)-1});
$('#dot2').css({left: screenWidth*(51.69642857142858/100)-1, top: screenHeight*(43.54322305229456/100)-1});
$('#dot3').css({left: screenWidth*(55.98214285714286/100)-1, top: screenHeight*(50.160085378868736/100)-1});
$('#dot4').css({left: screenWidth*(64.55357142857143/100)-1, top: screenHeight*(42.58271077908218/100)-1});

These specific percentages were derived by clicking on the map using the following formula:

(evt.pageX/$(window).width())*100

I would greatly appreciate any assistance you can provide. Thank you!

Answer №1

Since I didn't receive a response, I decided to share my solution here. I enlarged the image and disabled the page scroll in order to ensure consistent GPS functionality regardless of the device size.

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

The functionality of a button within a web component is restricted to only trigger the click event once after it has been

I am facing an issue with my class that includes three buttons for navigating the app. The event listeners I add to these buttons in the connectedCallback method only work once. When I click one of the buttons, like the next button, it changes the attribut ...

What is the most effective way for AngularJS controllers to communicate with one another?

As I develop a controller, it must interact with another controller. However, I'm uncertain if this is achievable? HTML: <div data-ng-app="TestApp"> <div data-ng-controller="menuCtrl"> <ul> <li> <a data-ng-clic ...

Customize Material-UI icons dynamically by changing their props in an array

I am looking to change props (color, size) for multiple icons in an array using Material-UI v4: const ICONS_ARRAY: React.ReactNode[] = [ <AlertCircleCheckOutline />, <AppleSafari />, <MotionPlay />, <AppleKeyboardCommand />, <Fil ...

Searching patterns in Javascript code using regular expressions

I am dealing with two strings that contain image URLs: http://dfdkdlkdkldkldkldl.jpg (it is image src which starts with http and ends with an image) http://fflffllkfl Now I want to replace the "http://" with some text only on those URLs that are images. ...

Activate Bootply libraries with Bootstrap data toggle tab

Greetings! I am excited to be sharing my first post here and although I am a newcomer, I am eager to expand my knowledge. Before reaching out with my question, I did some research here because I found myself a bit stuck. Allow me to provide an example of ...

JavaScript and the importance of using commas in arrays

I am developing a system that displays text in a textarea when a checkbox is checked and removes the text when the checkbox is unchecked. The functionality is mostly working as intended, but I am facing an issue where commas remain in the textarea after un ...

PHP code for displaying images on the same level

Is there a way to position images side by side in PHP? For example: image image image image. Currently, with the following code: print "</h2><br><a href='form.php'><img src=***.jpg width=100 height=100 /><br> ...

Placement of text is incorrect on certain react cards

I have an application that retrieves videos and generates a card for each video, displaying the video title, creator, link, download option, views, and upload date on each card. Fetching and displaying these elements works well, for the most part. However ...

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

Send the latest version to a separate recipient

I am currently exploring the process of achieving the following: Within my dashboard, there are two distinct user types utilizing the system. One type initiates an action which triggers a database update through the use of .ajax() post on a different page ...

Is there a way to place the icon on the right side of the @mui/Chip component?

Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side. I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additio ...

Discover additional Atom extensions

I am exploring the possibility of implementing a feature in my Atom package where it can automatically detect whether specific third-party packages have been installed. Currently, my package adds configuration for one such third-party package, but I want t ...

Creating dynamic transformations and animations for characters and words within a paragraph in 3D

Looking to add animation effects to specific parts of a paragraph, but transforming the entire box instead. Remembering seeing a solution on StackOverflow before, now regretting not saving it. Spent over an hour searching for a similar answer without succ ...

Using Angular 2 to execute an interface while making an HTTP GET request

I've managed to successfully retrieve and display data from a JSON object using *ngFor in Angular. However, I am struggling with applying an interface to the retrieved data. This is the content of my interface file: import {Offer} from './offer ...

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...

PHP not displaying line breaks from JavaScript textarea

I am facing an issue while trying to generate a .txt file on my server upon form submission. Despite including newlines in the comment section, they do not show up in the resulting .txt file. Below is the code snippet I am using: Javascript function sen ...

Unleashing the power of dynamic column width in Material UI Grid

Is it possible to dynamically change the column width for grid items within the same container in material UI grid? Sometimes I have 2 grid items that need to display in the same row, and other times I have 4 grid items that I want to appear in the same r ...

Using target="_blank" does not seem to open a popup window in React

The issue is that the target="_blank" attribute is not working properly for the modal popup window. Instead, the link is opening in the same page and the popup is closing. <TermLink to="/legal/privacy-policy" target="_blank"> Privacy Pol ...

There seems to be a problem with the JavaScript function as the indexOf property is undefined

function filteredArray(arr, elem) { let newArr = []; Iterating through each element of the multidimensional array. for (let i=0;i<arr.length;i++){ for (let j=0;j<arr[i].length;j++){ If the value matches the argument passed, assi ...

Using JQuery to send files via $.ajax

Possible Duplicate: jQuery Ajax File Upload I'm looking to implement a file upload feature using PHP and display a loader to the user during the upload process. I want to use jQuery to update a specific div after the upload is complete. However, ...