如何实现整个屏幕都是图片。点击图片，图片放大 旁边图片往外挤压

实现整个屏幕都是图片可以通过以下步骤：

1. 使用 HTML 和 CSS 将屏幕铺满一张图片。
2. 在图片上覆盖一个透明的 `<div>` 元素，这个 `<div>` 元素的宽高和屏幕相同。
3. 将每个图片都放置在这个 `<div>` 元素中。
4. 使用 JavaScript 监听图片的点击事件，当点击时将被点击的图片放大，并将其他图片往外挤压。

以下是一个简单的实现示例代码：

HTML:

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

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#gallery {
  position: relative;
  height: 100%;
}

#gallery img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

#gallery img.active {
  z-index: 1;
  transform: scale(1.5);
}

#gallery img:not(.active) {
  z-index: 0;
  opacity: 0.5;
  transform: translateX(-50%);
}

JavaScript:

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

images.forEach(img => {
  img.addEventListener('click', e => {
    images.forEach(otherImg => {
      if (otherImg !== img) {
        otherImg.classList.remove('active');
      }
    });
    img.classList.toggle('active');
  });
});

在这个示例中，我们将所有图片放到一个包含 `id="gallery"` 的 `<div>` 元素中，使用 CSS 将这个 `<div>` 元素覆盖整个屏幕，并将每个图片的 `position` 属性设置为 `absolute`，使它们可以在 `<div>` 元素中任意定位。我们还为图片定义了一个 `.active` 类，用于标识当前被点击的图片，并且在 `.active` 类上应用了一些 CSS 样式，使其放大并放置在其他图片的上面。在 JavaScript 中，我们监听了每个图片的点击事件，并在点击时将其他图片的 `.active` 类移除，同时给被点击的图片添加 `.active` 类，以触发放大和挤压的效果。