JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bluebox">
  <img src="http://i.imgur.com/qxvPxFX.png">
</div>
<div class="redbox">
  <img src="http://i.imgur.com/q6VSm7U.png">
</div>

CSS

body{
  padding:0;
  margin:0;
}
.redbox img{
  width:30%;
  height:auto;
  position:absolute;
  top:0;
}
.bluebox img{
  /*Make this image fit exactly inside the redbox. The redbox borders are 10 IMAGE PIXELS wide (but have a variable width in reality, since the window is scalable.)*/
  position:absolute;
  z-index:1;
  left:???;
  top:???;
  width:???;
  height:auto;
}

JavaScript

function fitIn10Pixels() {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      var widthRatio = $(".redbox img").width()/width;
      var heightRatio = $(".redbox img").height()/height;
      var tenFromLeft = 10*widthRatio;
      var tenFromTop = 10*heightRatio;
      
      $(".bluebox img").css("left",tenFromLeft+"px");
      $(".bluebox img").css("top",tenFromTop+"px");
      $(".bluebox img").css("height",$(".redbox img").height()-2*tenFromTop+"px");
      $(".bluebox img").css("width",$(".redbox img").width()-2*tenFromLeft+"px");
    };

    newImg.src = $(".redbox img")[0].src; // this must be done AFTER setting onload
}

$(window).on("resize", function(){
	fitIn10Pixels();
});

fitIn10Pixels();