Question

有人能帮我弄清楚我在这里遗漏了什么吗？

我插入了一张来自 Wiki 的随机照片，其大小与我需要使用的某些类型的图像相似。图像将具有不同的大小，我只需要它们在旋转后始终在浏览器中可见，无论图像大小如何。基本上任何时候我旋转图像的图像部分都会被推到浏览器窗口的可视区域之外。它完全按照我需要的方式工作，除了部分溢出。

我需要添加什么来解决这个问题？

谢谢，

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      width: auto;
      max-width: 100%;
      height: auto;
    }
  </style>

</head>

<body>
  <img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/6/6c/Us_flag_large_38_stars.png" style="transform: rotate(0deg)">
  <script type="text/javascript">
    let rotateAngle = 90;


    function rotate(image) {
      image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
      rotateAngle = rotateAngle + 90;
    }
  </script>

  <div class="as-console-wrapper">
    <div class="as-console"></div>
  </div>
</body>

</html>

Answer 1

您的图片宽度大于高度，并且位于页面顶部。旋转保持中心固定意味着图像的某些部分将移出页面。 (width/2)>(height/2) 很多。旋转时，想象高度变为宽度，反之亦然。

另外：在您的情况下，宽度为 auto 意味着图像的宽度与其父级（主体）一样多。

保持您想要的宽度，我只是将图像以我们需要的角度向下推，因此图像的中心会发生偏移。

    let rotateAngle = 90;


    function rotate(image) {
      image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
      rotateAngle = rotateAngle + 90;
      if(rotateAngle%180==0){
        image.classList.add('pushDown');
      }
      else{
   image.classList.remove('pushDown');     
      }
    }

  img {
      width: 100%;
      max-width: 100%;
     height: auto;

    }

.pushDown{
  margin-top: 25%;
      margin-bottom: 20px;
}

  <img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/6/6c/Us_flag_large_38_stars.png" style="transform: rotate(0deg)">

  <div class="as-console-wrapper">
    <div class="as-console"></div>
  </div>

图像被 onclick 旋转截断

1 个答案: