polaroid-gallery 图片画廊 图片如何自动随机放大

要实现图片自动随机放大的效果，可以使用 JavaScript 和 CSS 来编写代码。以下是一种可能的实现方法：

1. 首先，在 HTML 中创建一个包含所有图片的容器，例如：

<div class="gallery">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <!-- more images... -->
</div>

2. 在 CSS 中设置容器的样式，包括宽度、高度、位置等：

.gallery {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

这里使用了 Flexbox 布局来让图片居中显示。

3. 接下来，使用 JavaScript 来实现图片的随机放大。可以为每张图片添加一个点击事件，当点击图片时，将其放大到全屏显示。为了实现随机放大，可以使用 Math.random() 函数来生成一个随机数，然后根据这个随机数选择一张图片进行放大。

const images = document.querySelectorAll('.gallery img');

images.forEach(img => {
  img.addEventListener('click', () => {
    // get a random image index
    const index = Math.floor(Math.random() * images.length);
    // get the selected image
    const selectedImg = images[index];
    // create a new image element for the enlarged image
    const enlargedImg = document.createElement('img');
    enlargedImg.src = selectedImg.src;
    enlargedImg.classList.add('enlarged');
    // add the enlarged image to the body
    document.body.appendChild(enlargedImg);
  });
});

4. 最后，在 CSS 中设置放大后的图片的样式，包括宽度、高度、位置等：

.enlarged {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  object-fit: contain;
  cursor: zoom-out;
}

这里使用了 object-fit 属性来保持图片的宽高比，同时让图片完整显示在屏幕上。

以上就是一个简单的实现方法，可以根据需要进行调整和优化