I am trying to implement image thumbnail preview, using jasny fileinput control. Since my photo could require rotation, I added additional rotation button. The issue I have got is that when image is not square and it is rotated, it is partially truncated from the thumbnail space. Here is the JSFiddle http://jsfiddle.net/cumqod2n/
<div>
<button id="rotate" type="button" class="btn btn-default">Rotate <i class="fa fa-repeat"></i></button>
</div>
<br>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img data-src="holder.js/100%x100%" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
just preview some image and try rotating it - see what I mean.
EDIT 1
Please find updated example here: http://jsfiddle.net/cumqod2n/4/. As you can note, I just move the "rotating" classes to fileinput div. It allows me to rotate image and show it completely. However, I have another issue - when image changes from landscape to portrait it has been overlapped by buttons below.
So my next question is - how can I adjust buttons below image accordingly?
