javascript - 内部图像旋转时更改尺寸的父 div

Question

我有一个包含一个或多个图像的模态，这些图像可以旋转。

我的问题是当图像旋转时它会溢出父 div。我希望容器可以更改尺寸以始终适合图像 (images)。

我创建了一个 codepen 看看。

我尝试更改许多 css 属性但都没有成功...

Jade :

.overlay
.fake-modal
  .content
    img.img(src='http://lorempixel.com/output/abstract-q-c-300-200-2.jpg')
    .wrapper
      button.left rotate left
      button.right rotate right

减少:

.overlay {
  background-color: rgba(0, 0, 0, .7);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fake-modal {
  background-color: #fff;
  padding: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  height: auto;
  z-index: 1;

  .content {
    position: relative;

    .wrapper {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
}

js:

var angle = 0;
var btnLeft = $('.left');
var btnRight = $('.right');

btnLeft.on('click', function (e) {
  e.preventDefault();
  angle = angle - 90;
  rotate(angle);
});

btnRight.on('click', function (e) {
  e.preventDefault();
  angle = angle + 90;
  rotate(angle);
});

function rotate(rotateDegrees) {
  var r = 'rotate(' + rotateDegrees + 'deg)';
  var img = $('.img');
  img.css({
    '-moz-transform': r,
    '-webkit-transform': r,
    '-o-transform': r,
    '-ms-transform': r
  });
}

Answer 1

使用getBoundingClientRect()解决

代码笔:http://codepen.io/anon/pen/BNENge