JSFiddle - React, Tailwind, and code Playground

by Noir Noir

HTML

<div class="js-resizable-container" data-save-aspect-ratio="true">
  <img src="https://natworld.info/wp-content/uploads/2018/01/%D0%A1%D0%BE%D1%87%D0%B8%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BC%D1%83-%D0%9F%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0.jpeg" alt=""/>
</div>

CSS

.js-resizable-container.resizable {
  background: cyan;
  position: relative;
}
.js-resizable-container .resizer {
  width: 10px;
  height: 10px;
  background: blue;
  position:absolute;
  right: 0;
  bottom: 0;
  cursor: se-resize;
}
.js-resizable-container img {
  display: block;
  width: 100%;
  height: 100%;
}

JavaScript

var resizableContainer = document.querySelector('.js-resizable-container'),
		img = resizableContainer.querySelector('img'),
    width, height;
    
if (img) {
		width = img.offsetWidth;
    height = img.offsetHeight;
} else {
		width = resizableContainer.offsetWidth;
    height = resizableContainer.offsetHeight;
}
    
var ratio = width / height;

document.addEventListener('click', function (){
		resizableContainer.className.remove('resizable');
});

resizableContainer.addEventListener('click', function init() {
    resizableContainer.removeEventListener('click', init, false);
    resizableContainer.className = resizableContainer.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    resizableContainer.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(resizableContainer).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(resizableContainer).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
	 var width = startWidth + e.clientX - startX;
   var height;
   if (resizableContainer.dataset.saveAspectRatio) {
      height = width/ratio;
   } else {
   		height = startHeight + e.clientY - startY;
   }
   resizableContainer.style.width = width + 'px';
   resizableContainer.style.height = height + 'px';
   if (img) {
   		img.setAttribute('width', width);
      img.setAttribute('height', height);
   }
}

function stopDrag(e) {
 document.documentElement.removeEventListener('mousemove', doDrag, false);    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}