JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<img id='myImg' src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" />

CSS

div {
  height: 50%; /* doesn't work */
  /* height: <num> px; does work but isn't responsive */
  overflow: hidden;
}

JavaScript

function showPart(img, offsetTop, offsetLeft, width, height){
  var src = img.src;
	$(img).replaceWith("<canvas id='cnvs' style='max-width:100%;'></canvas>");
  var canvas = document.getElementById('cnvs');
  canvas.height = height;
  canvas.width = width;
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(this, offsetLeft, offsetTop, width, height, 0, 0, width, height);
  };
  img.src = src;
}

var img = document.getElementById('myImg');
showPart(img, 150, 150, 200, 200);