启动3 img响应中断后应用css旋转

Question

在模态内旋转图像90度后，img响应不再工作.图像高度超出了模态高度。

​

function rotate(){
    var angle = ($('#testImg').data('angle') + 90) || 90;
    $('#testImg').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#testImg').data('angle', angle);
}
$(document).ready(function() {
    $('.modal').modal('show');
})

.modal {
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
        <img id="testImg" class="img-responsive" src="http://wallpapercave.com/wp/LYiEQH6.jpg">
        <button class="btn btn-primary" onclick="rotate()"></button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

​

Answer 1

正如您在这个例子中所看到的：https://jsbin.com/veranak/edit?html,css,js,output，它不是模型的问题。

响应图像容器的高度相对于图像的宽度和高度。css transform属性旋转图像，但不影响其容器的大小(也不影响图像的大小，它只是旋转图像)。

1)可以尝试将滚动条添加到. scrollbar元素，而不是.modal

.modal-body {
    overflow-y: scroll;
}

2)本文可能帮助您找到一个更优雅的解决方案：http://kizu.ru/en/fun/rotated-text/

下面的jsbin代码

html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="image">
        <img id="testImg" class="img-responsive" src="http://wallpapercave.com/wp/LYiEQH6.jpg">
        <button class="btn btn-primary" onclick="rotate()"></button>
</div>

css：

.image {
  border: 1px solid;
  margin-top: 5vh;
  padding: 1em;
}

javascript：

function rotate(){
    var angle = ($('#testImg').data('angle') + 90) || 90;
    $('#testImg').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#testImg').data('angle', angle);
}