Поворот изображения: регулировка ширины и высоты

Question

Я немного заглядывал за этим. Были некоторые решения, но я не мог их правильно понять. Я попытался реализовать матрицу вращения, но я не могу этого сделать. Я создал простую скрипту, где при щелчке изображение поворачивается на 90deg (не включает мою реализацию, потому что я не понимаю, как это сделать). Ниже приведен простой код. Может ли кто-нибудь помочь мне или помочь мне выполнить поворот. Сначала я хочу, чтобы у вас была определенная ширина и высота. При вращении на 90 градусов ширина становится высотой, а высота становится шириной, поэтому изображение остается в пределах div.

fiddle link

<div><img id="rotate-image"></div> 
<span onClick="myFunction()">click<span> 

JS

function myFunction(){ 
$("#rotate-image").css("transform", "rotate(90deg):} 

Как вы можете видеть на скрипке после нажатия на кнопку, поворотное изображение 90deg. Но если вы увеличиваете/уменьшаете разделитель между результатом и секцией javascript, изображение становится все больше и меньше. Я хочу, чтобы изображение оставалось в поле div и уменьшалось по ширине поля div.

Надеюсь, это никого не смущает. Нужно повернуть изображение (обычный, 90,180,270, вернуться к нормальной жизни)

Answer 1

http://jsfiddle.net/72nptzq5/6/

CSS

.parent{ 
    width: 70%; 
    height:300px; 
    border:1px solid black; 
    text-align: center; 
} 
#rotate-image{ 
    max-width:100%; 
    display: inline-block; 
} 
.table{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
.table-cell{ 
    display:table-cell; 
    vertical-align:middle; 
} 

HTML

<div class="parent"> 
    <div class="table"> 
     <div class="table-cell"> 
      <img id="rotate-image" src="https://cdn.tutsplus.com/net/uploads/legacy/254_apps/images/200x200.png" /> 
     </div> 
    </div> 
</div> 
<span onclick="myFunction()">click</span>