Я пытаюсь реализовать предварительный просмотр миниатюр изображения, используя элемент управления jasny fileinput. Так как моя фотография могла потребовать поворота, я добавил дополнительную кнопку поворота. Проблема, с которой я столкнулся, заключается в том, что когда изображение не квадратное и оно повернуто, оно частично обрезается из области эскиза. Вот 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>
просто просмотрите какое-нибудь изображение и попробуйте повернуть его — поймите, что я имею в виду.
ИЗМЕНИТЬ 1
Обновленный пример можно найти здесь: http://jsfiddle.net/cumqod2n/4/. Как вы можете заметить, я просто перемещаю «вращающиеся» классы в div fileinput. Это позволяет мне вращать изображение и показывать его полностью. Однако у меня есть другая проблема - когда изображение меняется с альбомного на портретное, оно перекрывается кнопками ниже.
Итак, мой следующий вопрос: как я могу соответствующим образом настроить кнопки под изображением?
