SVG

by Nico D

HTML

<div style="background-color:lavender">
  <svg width="100" height="100">
    <rect id="screenTab" x="0" y="0" rx="2" ry="2" width="60" height="45" style="stroke:grey; fill:transparent" />
    <rect id="windowContainer" x="10" y="10" rx="2" ry="2" width="8" height="2" style="fill:pink; display: none" />
  </svg>
</div>

JavaScript

var maxWidth = parseInt(document.getElementById("screenTab").getAttribute("width"), 10);
var maxHeight = parseInt(document.getElementById("screenTab").getAttribute("height"), 10);

function setWindowContainer(x, y, width, height) {
	document.getElementById("windowContainer").setAttribute("x", x);
	document.getElementById("windowContainer").setAttribute("y", y);
	document.getElementById("windowContainer").setAttribute("width", width);
  document.getElementById("windowContainer").setAttribute("height", height);
  document.getElementById("windowContainer").style.display = "block";
}

var x = 100;
var y = 200;
var width = 300;
var height = 150;
var screenX = 500;
var screenY = 600;

//screenX : maxWidth = width : newWidth
//screeny : maxHeight = height : newHeight
var newY = (maxWidth * y / screenY);
var newX = (maxHeight * x / screenX);
var newWidth = (maxWidth * width / screenY);
var newHeight = (maxHeight * height / screenX);

setWindowContainer(newY, newX, newWidth, newHeight);