<div class="container">
  <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/responsive-logo.svg' alt=''>
  <div class="resizer"></div>
</div>
body {
     background: #f2f2f2;
}
.container {
     margin: 3%;
     background: white;
     position: relative;
     width: 94%;
     height: 70vh;
     overflow: hidden;
     min-width: 100px;
     min-height: 170px;
}
img {
     display: block;
     width: 100%;
     height: 100%;
}
.resizer {
     position: absolute;
     width: 32px;
     height: 32px;
     padding: 4px;
     bottom: 0;
     right: 0;
     cursor: nwse-resize;
     background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/handle.svg) no-repeat;
     background-size: 32px;
}
$(".container").resizable({
  handleSelector: ".resizer"
});

//resizable box from Rick Strahl’s jQuery Resizable: https://github.com/RickStrahl/jquery-resizable

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js