这是我的密码笔：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>

$('.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; }

1条答案

按热度按时间

zyfwsgd61#

我已使用有效的解决方案更新了您的代码笔：https://codepen.io/fallowings/pen/wvdzkgz
解决方案的想法是将图像放入初始加载时渲染的框中，以防止内容跳转。这可以通过旋转图像时的css缩放来实现。事实上，对于您的任务，还有更多可能的解决方案和更多需要解决的边缘情况：例如，可以使图像按行相互依赖，肖像图像可以以较小的尺寸加载，加载时缩小尺寸以匹配横向图像高度。或者，可以在旋转时放大横向图像，以占用更多空间并匹配纵向图像的高度。尝试定义你需要达到的确切逻辑，至少是在纸面上-然后我将能够帮助你进一步改进。

赞(0）回复(0）举报 2021-09-23

旋转图像重叠

1条答案

相关问题

热门标签

最新问答