旋转图像重叠

Question

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

我有两个问题。首先，当我单击旋转按钮时，当默认图像方向为纵向时，图像会在另一行（横向）或其他列上重叠。对于第二个问题，它是纵向的图像尺寸。这个太大了。所以在我的代码笔中，我设置了不同的图像大小来向你展示我的问题：

1300x740      1300x740

500x1300      1300x740

1300x500      1300x740

我想我有一个想法来解决这个问题，但我不知道该怎么做。我的想法是初始化容器和图像大小。

为了解决行重叠问题，每个行高容器将由最大的边设置。如果我们是纵向的，那么行容器的高度将是图像的高度。如果我们在横向，那么容器的高度就是宽度。就像每次我旋转我的图像时它不会在其他行上重叠。

为了解决在默认图像方向为纵向时不与其他列重叠的宽度问题，我想按应有的方式初始化图像大小。例如，如果您在我的代码笔500x1300 和1300x500 中拍摄这些图像，如果您旋转1300x500 图像，那没关系，因为这是合适的尺寸，所以我想减小500x1300 的尺寸以获得与500x1300 相同大小以获得正常大小并保持图像在列中居中。我想让它保持响应。

所以我不知道是否有一个好的方法可以通过使用 flexbox 或其他东西来解决重叠问题。

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 class="box">
 <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/500/1300" 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/500" 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

我已使用有效的解决方案更新了您的 Codepen： https://codepen.io/FalloWingS/pen/wvdzKGZ

解决方案的想法是在初始加载时将图像放入渲染的框中，以防止内容跳转。当您旋转图像时，这可以通过 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);
  }
})

.box {
  overflow: hidden;
}
.row-documents {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.row-documents img {
  margin: auto;
}
.img-document {
  display: flex;
  flex-basis: 45%;
  flex-grow: 0;
  transition: all 0.3s ease;
}
.rotate-button {
  align-self: center;
  margin: 0 10px;
  width: 50px;
  display: flex;
  justify-content: center;
  flex-basis: 5%;
  flex-grow: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <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/500/1300" 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/500" 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>