JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://hitconsultants.com/dragscroll_scrollsync/dragscrollable.js"></script>
<script src="http://hitconsultants.com/dragscroll_scrollsync/scrollsync.js"></script>
<figure class="container">    				
    <img class="content" src="http://img7.imageshack.us/img7/6766/sampes.jpg" alt="sample" />
</figure>
<figure class="container">    				
    <img class="content" src="http://img7.imageshack.us/img7/6766/sampes.jpg" alt="sample" />
</figure>

CSS

* 
{
margin:0; 
padding:0; 
border:0
}

.container
{
    width:100%;
    background:black;
    overflow:hidden;    
}
.content
{
    width:100%;
    display:block;
}

JavaScript

var $cont = $('.container .content'),
    init_size = $cont.width()*0.1,
    ratio = $cont.width() / $cont.height(),
    c =0,
    s = [400,init_size];

$cont.height( init_size );

$cont.click(function(){   
    $(this).stop().animate({height: s[c%2], width: s[c%2] * ratio });
    c++;
});

  $(function() {	
	$('.container, .content').
		scrollsync({targetSelector: '.container', axis : 'x'});

	$('.container, .content').
		dragscrollable({dragSelector: '.content', acceptPropagatedEvent: false});	 
  });