css，jasnyfileinput-旋转缩略图

Question

我正在尝试使用jasny fileinput控件实现图像缩略图预览。由于我的照片可能需要旋转，我添加了额外的旋转按钮。我遇到的问题是，当图像不是正方形并且旋转时，它会从缩略图空间中部分截断。这是JSFiddlehttp://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/.正如您所注意到的，我只是将"旋转"类移动到fileinputdiv。它允许我旋转图像并完整地显示它。然而，我有另一个问题——当图像从横向变为纵向时，它被下面的按钮重叠了。

所以我的下一个问题是——如何相应地调整图片下方的按钮？

Answer 1

这不是Jasny Bootstrap特有的，而是CSS转换特有的。

读取CSS中影响其父级的旋转元素'；s高度正确