如何让3张图片大小相同，当我切换到移动模式时，3张图片会重叠？

要实现在切换到移动模式时让3张图片重叠，可以通过以下步骤实现：

HTML结构：在HTML中创建一个容器元素，并在该容器中添加3个图片元素，分别代表3张图片。

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS样式：使用CSS设置容器元素的样式和图片元素的样式，以实现重叠效果。

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

@media (max-width: 768px) {
  .image-container img {
    opacity: 0;
    pointer-events: none;
  }
  
  .image-container img:first-child {
    opacity: 1;
    pointer-events: auto;
  }
}

在上述CSS代码中，通过使用position: relative设置容器元素为相对定位，然后使用position: absolute和top: 0; left: 0;将图片元素绝对定位在容器中。同时，设置图片元素的宽度和高度为100%以填充容器，并使用过渡效果实现平滑的切换动画。

在@media (max-width: 768px)媒体查询中，当屏幕宽度小于等于768像素（移动设备），将所有图片元素的不透明度设置为0，禁用其点击事件。同时，将第一个图片元素的不透明度设置为1，启用其点击事件。这样，切换到移动模式时，只有第一张图片可见并可点击。

JavaScript交互（可选）：如果需要在切换图片时添加交互效果，可以使用JavaScript来处理。

const images = document.querySelectorAll('.image-container img');
let currentIndex = 0;

setInterval(() => {
  images[currentIndex].style.opacity = 0;
  
  currentIndex = (currentIndex + 1) % images.length;
  
  images[currentIndex].style.opacity = 1;
}, 3000);

在上述JavaScript代码中，使用setInterval函数定时切换图片。通过修改图片元素的不透明度实现切换效果。每隔3秒，当前显示的图片元素的不透明度将被设置为0，然后更新当前索引值，再将下一张图片元素的不透明度设置为1，以此循环切换图片。

以上就是实现在切换到移动模式时让3张图片重叠的方法。如需了解更多关于云计算、IT互联网领域的知识，推荐访问腾讯云官方网站了解相关产品和解决方案：腾讯云官网。请注意，本回答中没有提及其他云计算品牌商，如有需要，可参考相关文档或搜索其他合适的资源。