JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div id="image_container">
    <div class="image">
        <div class="image_inner"></div>
    </div>
</div>
<h2>Click on image to change between static and dynamic imageheight</h2>

CSS

#image_container{
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: rgba(12, 12, 12, 0.8);
    border-left: 1px solid #383838;
    border-right: 1px solid #383838;
}
.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}

.image{
    width: 60%;
    margin: 20px auto;
}
.image .image_inner{
    padding-bottom: 133.333333333333%;
    background-image: url(http://i.imgur.com/1V0hUo5.jpg);
    background-size: cover;
    cursor: pointer;
}

JavaScript

var scrollpane_image_api;
var withStatic = false;

$( document ).ready(function() {                
	$('#image_container').jScrollPane({
		contentWidth: '100%',
		hideFocus: true,
	});
	scrollpane_image_api = $('#image_container').data('jsp');
   
    $(".image").click(function(){
        if(withStatic){
            $(".image_inner").css({height: 0});
            $(".image_inner").css({"padding-bottom": "133.333%"});
            scrollpane_image_api.reinitialise();
        }else{
            console.log($(".image").height());
            $(".image_inner").css({height: $(".image").height()});
            $(".image_inner").css({"padding-bottom": 0});
            scrollpane_image_api.reinitialise();
        }
        withStatic = !withStatic;
    })
})