In my latest project, I created a JavaScript function to dynamically resize a div based on the original background size. I implemented this function to trigger on page load and on the "resize" window event using jQuery.
Take a look at the code snippet below. It may seem a bit messy and in need of some cleaning up, but I believe it can be helpful to anyone who comes across it.
→ https://jsfiddle.net/Nat/2a0ggcLs/
function resizeDiv() {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
//original background image size
var bgWidth = 1000;
var bgHeight = 667;
//position of element in relation to original background size
var topPosition = 220;
var leftPosition = 620;
//size of element in relation to original background size
var elementWidth = 100;
var elementHeight = 200;
//for vertical screens
if ((windowHeight / windowWidth) > (bgHeight / bgWidth)) {
//resize
document.getElementById("element1").style.width = ((windowWidth / bgWidth) * elementWidth) + "px";
document.getElementById("element1").style.height = ((windowWidth / bgWidth) * elementHeight) + "px";
//position
var adjustedHeight = (windowWidth * (bgHeight / bgWidth));
var posY = (topPosition * (windowWidth / bgWidth)) + ((windowHeight - adjustedHeight) / 2);
document.getElementById("element1").style.top = posY + "px";
document.getElementById("element1").style.left = (leftPosition * (windowWidth / bgWidth)) + "px";
} else {
//for panoramic screens
//resize
document.getElementById("element1").style.width = ((windowHeight / bgHeight) * elementWidth) + "px";
document.getElementById("element1").style.height = ((windowHeight / bgHeight) * elementHeight) + "px";
//position
var adjustedWidth = (windowHeight * (bgWidth / bgHeight));
var posX = (leftPosition * (windowHeight / bgHeight) + ((windowWidth - adjustedWidth) / 2));
document.getElementById("element1").style.left = posX + "px";
document.getElementById("element1").style.top = (topPosition * (windowHeight / bgHeight)) + "px";
}
}