JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" step="0.1" min="0" max="2" id="ratio" value="1" />
<button id="changeRatio">Change ratio</button>
<div id="containerDragable">
    <img id="img_messi" src="http://www.elconfidencial.com/fotos/noticias_2011/2012090245messi_dentro.jpg" />
    <div id="text_example">hi!</div>
</div>

CSS

#containerDragable {
    font-size: 24px;
    width: 80vw; 
    height: 45vw;
    background-color: rgb(227, 227, 227);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position:absolute;
}
#containerDragable > * {
    cursor: pointer;
    position: absolute;
    display: block;
    transform: scale(0.5);
    border: 1px solid red;
}

JavaScript

function refresh() {
    var ratio = parseFloat($('#ratio').val());
    $('#containerDragable > *').each(function(){
        var verticalOffset = ($(this).height() - $(this).height()*ratio)*0.5;
        var horizontalOffset = ($(this).width() - $(this).width()*ratio)*0.5;
        $(this).css('margin', '-'+verticalOffset+'px -'+horizontalOffset+'px -'+verticalOffset+'px -'+horizontalOffset+'px');
        $(this).css({
            '-moz-transform': 'scale(' + ratio + ')',
            '-webkit-transform': 'scale(' + ratio + ')',
            'transform': 'scale(' + ratio + ')'
        });
        $(this).draggable({
            containment: "#containerDragable", cursor: "move", scroll: false
        });
    });
}

$(function () {
    refresh();
    
    $('#changeRatio').click(function(){
        // refresh all
        refresh();
    });
});