Question

在模态内旋转图像90度后，img-responsive不再起作用。图像高度超出模态高度。

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）您可以尝试将滚动条添加到.modal-body元素而不是.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);
}

应用css旋转后，Bootstrap 3 img-responsive断开

1 个答案: