css, jasny fileinput - 축소 이미지 축소

Question

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> 

가 좀 이미지를 미리 그것을 회전하려고합니다.

EDIT 1

것은 여기에 업데이트 된 예를 찾아주세요 : http://jsfiddle.net/cumqod2n/4/을. 당신이 주목할 수 있듯이, 나는 단지 "회전하는"클래스들을 fileinput div로 옮긴다. 이미지를 회전시키고 완전히 보여줄 수있게 해줍니다. 그러나 이미지가 가로에서 세로로 바뀌면 다른 버튼과 겹치게됩니다.

그럼 내 다음 질문은 - 어떻게 이미지 아래의 단추를 조정할 수 있습니까?

Answer 1

이것은 재시 부트 스트랩에 국한되지 않고 CSS 변환에 해당합니다.

읽기 Rotated elements in CSS that affects their parent's height correctly