在应用 css 旋转后引导 3 个 img 响应中断

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(您可以尝试将滚动条添加到.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);
}