Having a bit of trouble figuring things out. Hi everyone!
I have a basic frontend setup with a navbar and two columns below. The left column has a fixed size of 80px, while the right one contains an image (making it fluid/responsive).
The issue I'm facing is adding an input field over the image but making it responsive to the image's size seems to be a challenge.
My idea was to determine the scale of the image and then downscale the input field accordingly using JavaScript.
Here's a snippet of what I had in mind:
$(window).resize(function() {
// 1192 is the original imagewidth
let scale = $(".step:visible").width() / 1192;
let inputposition = document.getElementById(testid);
inputposition.css('transform', 'scale(' + scale + ')');
inputposition.css('transform-origin', 'top left');
});
I considered using `transform: scale(scale);` on the input field but that also downscaled the image along with it.
If anyone has some insights or suggestions, please do share them.
Ultimately, my goal is to have the input field resize and reposition as the window size changes.
Below is the sample code I'm currently working with:
<!DOCTYPE html>
<html>
... (rest of the code) ...
</html>
Thanks a lot for your help!