时间戳

首页 > 解决方案 > 旋转图像重叠

javascript - 旋转图像重叠

问题描述

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

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

1300x740      1300x740

500x1300      1300x740

1300x500      1300x740

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

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

为了解决在默认图像方向为纵向时不与其他列重叠的宽度问题，我想像它应该的那样初始化图像大小。例如，如果您在我的 codepen 中拍摄这些图像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>

标签： javascriptcssflexbox

解决方案

我已经使用有效的解决方案更新了您的 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>

推荐阅读