html - 旋转后的图像超出父 div

Question

我想旋转图像，但它超出了父 div。

<div>
  <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg">
  <button class="rotate-button">rotate image</button>
</div>

jquery code

$('.rotate-button').on('click', function() {
  var image = $(this).prev('img');
  image.className = "rotated_90deg";
});

未旋转状态:

旋转状态:

如何让图像在旋转状态下变小，使其不超出父 div？

Answer 1

尝试使用具有scale 属性的解决方案

$('.rotate-button').on('click', function() {
  var image = $(this).prev('img');
  image.className = "rotated_90deg";
});

.rotated_90deg {
  transform: rotate(90deg) scale(0.5, 1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <img src="https://cdn.eso.org/images/thumb300y/eso1907a.jpg">
  <button class="rotate-button">rotate image</button>
</div>