将新图像添加到 div 时无法保持隐藏溢出

Question

我正在编写一个函数，在容器 div 中添加图像（来自数组），位于用户当时点击的坐标处。

问题是我无法保持容器尺寸固定，我不知道为什么每当我在其边界附近添加图像时它总是放大。

我面临的另一个问题是，除非我将它放在 div 中，否则我无法获取 img 高度，但我需要在创建图像时获得该信息，因为我需要放置它在点击点的中间。

你能帮我找出我做错了什么吗？

document.addEventListener('DOMContentLoaded', () => {
  
  //setup variables
  var arrayImgs = ['https://media-cdn.tripadvisor.com/media/photo-s/0e/eb/ad/3d/crazy-cat-cafe.jpg','https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Chairman_Meow_Bao.jpg/1200px-Chairman_Meow_Bao.jpg','https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg','https://cdn.britannica.com/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg'];
  var imgIndex = 0;
  
  
 document.querySelectorAll('.container').forEach(trigger => {
  trigger.addEventListener('click', function(){
    
      if (imgIndex >= arrayImgs.length){
        //check index to loop array
        imgIndex = 0;
      }
      var imgToAdd = document.createElement("img");
      var container = document.getElementById("myCanvas");
      
      imgToAdd.setAttribute("src", arrayImgs[imgIndex]);
      imgToAdd.classList.add('class-img');

      var x = event.clientX;  
      var y = event.clientY;
    
      //generate a random width form the image
      var rndInt = Math.floor(Math.random() * 33) + 20;
      var imgWidth = ((window.innerWidth / 100) * rndInt);
      
      //parse image width
      imgWidth = Math.floor(imgWidth);

      imgToAdd.setAttribute("width", imgWidth );
      imgToAdd.setAttribute("height", "auto" );
      var imgHeight = imgToAdd.height;
      
      //place the image in the middle of mouse X and Y
      imgToAdd.style.position = "absolute";
      imgToAdd.style.left = (x - (imgWidth / 2))+'px';
      imgToAdd.style.top = (y - (imgWidth / 2))+'px';
      
      container.appendChild(imgToAdd);
      imgIndex = imgIndex + 1;
  });
 });
});

#myCanvas {
  margin:0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.class-img {
  overflow: hidden;
  animation: bounce 1s;
  -webkit-animation: bounce 1s;
  -moz-animation: bounce 1s;
}

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<div id="myCanvas" class="container">CLICK ME</div>

Answer 1

第一个问题是 imgs 是用 position: absolute 放置的，但是它们的容器没有设置任何位置，所以它们是相对于最近的祖先设置的（一直往回到 body 如果没有别的）。所以它是 body 溢出（或任何最近定位的祖先）因此你得到滚动条。

您需要给#mycanvas（容器）一个位置。然后 imgs 将相对于它放置并且 overflow: hidden 将起作用。这个片段给它 position: relative.

document.addEventListener('DOMContentLoaded', () => {
  
  //setup variables
  var arrayImgs = ['https://media-cdn.tripadvisor.com/media/photo-s/0e/eb/ad/3d/crazy-cat-cafe.jpg','https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Chairman_Meow_Bao.jpg/1200px-Chairman_Meow_Bao.jpg','https://static.scientificamerican.com/sciam/cache/file/92E141F8-36E4-4331-BB2EE42AC8674DD3_source.jpg','https://cdn.britannica.com/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg'];
  var imgIndex = 0;
  
  
 document.querySelectorAll('.container').forEach(trigger => {
  trigger.addEventListener('click', function(){
    
      if (imgIndex >= arrayImgs.length){
        //check index to loop array
        imgIndex = 0;
      }
      var imgToAdd = document.createElement("img");
      var container = document.getElementById("myCanvas");
      
      imgToAdd.setAttribute("src", arrayImgs[imgIndex]);
      imgToAdd.classList.add('class-img');

      var x = event.clientX;  
      var y = event.clientY;
    
      //generate a random width form the image
      var rndInt = Math.floor(Math.random() * 33) + 20;
      var imgWidth = ((window.innerWidth / 100) * rndInt);
      
      //parse image width
      imgWidth = Math.floor(imgWidth);

      imgToAdd.setAttribute("width", imgWidth );
      imgToAdd.setAttribute("height", "auto" );
      var imgHeight = imgToAdd.height;
      
      //place the image in the middle of mouse X and Y
      imgToAdd.style.position = "absolute";
      imgToAdd.style.left = (x - (imgWidth / 2))+'px';
      imgToAdd.style.top = (y - (imgWidth / 2))+'px';
      
      container.appendChild(imgToAdd);
      imgIndex = imgIndex + 1;
  });
 });
});

#myCanvas {
  margin:0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.class-img {
  overflow: hidden;
  animation: bounce 1s;
  -webkit-animation: bounce 1s;
  -moz-animation: bounce 1s;
}

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<div id="myCanvas" class="container">CLICK ME</div>

从问题中的代码中不清楚 link 是放在文档的 body 中还是放在文档的头部。它可能应该放在你自己的任何样式之前的头部，这样你就可以在需要时覆盖 linked css 的样式。

第二个问题，计算 img 的高度，需要你加载 img（可以和现在在同一个地方，但是 opacity: 0），然后查看它的高度，然后重新定位它并设置 opacity: 1 并设置动画。

将新图像添加到 div 时无法保持隐藏溢出

Can't keep hidden overflow when adding new images to div

html

javascript

css

canvas