What is the best way to adjust the size of several smaller images proportionally to match a larger image positioned below them?

In my project, I am dealing with a situation where I have a large image (such as a map) and several smaller images (representing points on the map) that appear when you hover over certain areas. Right now, I am using absolute positioning to place these smaller images, but I am running into an issue. When the screen size changes and causes the big image to resize, the smaller images no longer align correctly. How can I resolve this problem using CSS without making the images too large so that users can easily hover over the intended areas?

htmlcss

Answer №1

  1. retrieve the dimensions of images
  2. set up event listeners for resizing
  3. calculate ratio when resize occurs
  4. apply ratio to adjust sizes of smaller images
    var startWidth = 0;

    document.addEventListener('DOMContentLoaded', function () {
         var el = document.getElementById("the-img");
         startWidth = el.offsetWidth;
         // use offSetWidth & offSetHeight to determine size of smaller image(s) 
    }

    window.addEventListener('resize', getRatio);

    function getRatio(){
         var el = document.getElementById("the-img");
         ratio = startWidth/el.offsetWidth;

         var smallerImgWid = ratio * orginialSmallImgWid;
         var smallerImgHeigh = ratio * origonalSmallImgHeight;
    }

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

Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow. For a live example, vi ...

htmlcssvue.js

Tips for enabling auto-scroll feature in MuiList

Currently, I am working on a chat window component that utilizes Material UI for styling. I expected that setting a height or max-height on either the MuiList or MuiBox encapsulating the list would automatically scroll to the new message when it's sen ...

javascriptcssreactjsmaterial-uistyled-components

What is the process for loading a PHP page dynamically within the <DIV> of another PHP page?

At this moment, I have two PHP pages named test1.php and test2.php. In the test1.php page, there are 2 DIVs: one labeled "SubmitDiv" and the other "DisplayDiv". Inside the SubmitDiv resides a Submit button. The desired functionality is that when a user cli ...

phpjqueryhtmlajax

Display or conceal rendering in Rails upon clicking a button

I'm attempting to accomplish a seemingly simple task that is proving quite challenging. My goal is to conceal a render or partial in a specific view within my Rails application. Despite my efforts to find a solution, I have not come across any working ...

javascriptjqueryhtmlcssruby-on-rails

A set of six DIV's, divided into two columns of three each

I'm attempting to arrange two columns with three vertical DIVs side by side. The left column is designated for main text, while the right column is reserved for miscellaneous information. Each column consists of a top and bottom DIV that display image ...

htmlcss

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

javascripthtmlarraysobjectprinting

What is the best way to combine a custom CSS class and a bootstrap class to style an element in next.js?

In the following example, the CSS class is imported and then applied to the element: import customStyles from "./Home.module.css"; <div className={(customStyles.collection, "card")}> Although they work individually, when combined as shown above, t ...

cssnext.js

Implementing translation text into a PHP database

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Translate and Save Text</title> </head> <body> <form action="" method="post" name="theform"> <table width="693" border="1" style="table-l ...

javascriptphphtmlmysqlgoogle-translate

Angular gives priority to input when clicking an element

Please find the stackblitz link attached below. https://stackblitz.com/edit/angular-dgx3pe My goal is to achieve a functionality where clicking on the label element will focus on the input. This should trigger the input:focus class. I believe this can be ...

javascriptcssangulartypescript

Utilizing CSS to Target IDs Using Classes

Recently, I came across a captivating video on YouTube demonstrating how to create a transitional gallery (http://www.youtube.com/watch?v=4sVTWY608go). Inspired by the tutorial, I attempted to implement a similar slider... However, I now have a new idea. ...

htmlcss

Difficulty in vertical alignment of inline-block elements

Greetings, I am currently working on creating a Resume in HTML. However, I seem to be facing an issue with the inline-block property as the two div elements that should be placed next to each other are not displaying as expected - one of them appears sligh ...

htmlcss

I'm looking for assistance with understanding Websockets and live data streaming for a grid interface. Can you lend a

I am completely new to Node.js and Websocket technology. After exploring socket.io, I successfully implemented a chat example. It works perfectly. Now my curiosity is how I can create a real-time data stream grid similar to the socket.io CHAT sample. Fo ...

node.jshtmldatatablewebsocketsocket.io

Borders appear to be missing in the card-like div layout

Despite using the same color for the outer border and inner borders, I am having trouble getting the inner borders to show up. Can anyone provide guidance on how to display both the inside and outside borders? Note: I have attempted changing the color, bu ...

jqueryhtmlcssborderbootstrap-4

Which JavaScript files should be included when using Jquery's Round corner plugin?

Can anyone provide me with a comprehensive list of files required for utilizing the round corners plugin in jQuery? Also, I'm interested in learning how to incorporate the plugin's functions into my JavaScript code. My goal is to implement rounde ...

jquerycssrounded-corners

I have a `null` input value. Is there a way to compute this value in relation to a date

When the input is null, what can be done to calculate the value with date? https://i.stack.imgur.com/DmFsJ.png /* // ======================================================== * * * * * How To Calculate Input Value With Date When Input Is Null * * */ // ...

javascripthtmldate

Building Dynamic Forms with React.js and Bootstrap for Easy Input Field Management

In the process of developing a web application using React.js and react-bootstrap, I encountered an interesting challenge. On one of the form pages, users should be able to input symptoms of an illness they are dealing with. The key functionality required ...

javascriptcssformstwitter-bootstrapreactjs

Webpack 4 Failing to Properly Render Select Tag

I am encountering an issue with a basic select element that is not displaying correctly due to Webpack. The screenshot below illustrates the final rendered page source, where the closing tag for the select element has been incorrectly positioned before the ...

javascripthtmlformswebpackwebpack-4

Looking for help with aligning an icon to the right side of my text

I'm struggling with aligning the icon to the right of the quantity. When I use float:right, it places the icon at the far right of the cell instead of next to the text. Is there a way to get it to be on the right side of the text but directly adjacent ...

htmlcssangularjsangular

Resolving Text Animation Flickering Issues in CSS and React

After successfully creating this animation using CSS animations and React, I encountered a flickering issue. The cause of this problem is unclear to me, it could be due to my usage of setInterval or potential issues with the keyframes in my CSS animations. ...

javascriptcssreactjscss-animations

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

javascriptjqueryhtmlcss