Flexbox 调整 div 旋转后 img 的高度

Question

这是我的代码笔：https://codepen.io/Johngtrs/pen/oNWLYEw

当我点击旋转按钮时，div img 容器旋转，但图像在另一行重叠。

如果需要，如何调整 img 的高度？

CSS：

.row-documents {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.row-documents img {
    width: 615px;
}
.img-document {
    transition: all 0.3s ease;
}
.rotate-button {
    margin: 0 10px;
    width: 50px;
    display: flex;
    justify-content: center;
}

HTML：

<div>
  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>

    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

  <hr />

  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

</div>

Answer 1

目前你不能只用 Css 来做到这一点

您可以检查您的图像是否采用纵向格式，并在这样时更改父级的高度

$('.btn-rotate').on('click', function () {
  let $img = $(this).parent().prev();
  let width = $img.width();
  let height = $img.height();
  let angle = ($img.data('angle') + 90) || 90;
  let scale = height < width ? height / width : width / height;
  if (angle % 180) {
    $img.css({'transform': 'rotate(' + angle + 'deg) scale('+ scale +')'});
    $img.data('angle', angle);
  }
  else {
    $img.css({'transform': 'rotate(' + angle + 'deg) scale(1)'});
    $img.data('angle', angle);
  }
})

.row-documents {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.row-documents img {
  max-width: 215px;
  max-height: 200px;
}

.img-document {
  transition: all 0.3s ease;
  transform-origin: center center;
  display: flex;
  justify-content: center;
}

.rotate-button {
  margin: 0 10px;
  width: 50px;
  display: flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>
  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>

    <div class="img-document">
      <img src="https://picsum.photos/740/1300" class="img-responsive">
    </div>

    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

  <hr />

  <div class="row-documents">
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
    <div class="img-document">
      <img src="https://picsum.photos/1300/740" class="img-responsive">
    </div>
    <div class="rotate-button">
      <button class="btn btn-default btn-rotate">
        Rotate
      </button>
    </div>
  </div>

</div>