如何为移动端动态调整轮播切换图片的尺寸

你的页面在桌面端显示正常，要实现手机端图片尺寸自适应，可通过以下步骤修改代码：

1. 修正CSS语法错误 #

原代码中存在无效语法：table, table td;}，这行会导致样式解析异常，直接删除即可。

2. 添加图片响应式样式 #

给轮播图片添加自适应规则，确保图片随容器宽度自动缩放，同时保持比例：

img.fadeinout {
  position: absolute;
  top: 0;
  left: 0;
  animation-name: rotateimgs;
  animation-duration: calc(var(--interval) * 3);
  animation-iteration-count: infinite;
  opacity: 0;
  /* 新增响应式属性 */
  max-width: 100%;
  height: auto;
}

3. 确保容器自适应宽度 #

调整table和td的样式，让它们在手机端占满可用宽度：

table {
  border-collapse: separate;
  border-spacing: 10px 20px;
  /* 新增：让表格占满父容器宽度 */
  width: 100%;
}

td {
  position: relative;
  --interval: 5s;
  /* 新增：让单元格占满表格宽度的50%（每行2个单元格） */
  width: 50%;
}

4. 针对小屏幕优化间距（可选） #

用媒体查询在手机端缩小单元格间距，避免布局拥挤：

@media (max-width: 768px) {
  table {
    border-spacing: 5px 10px;
  }
}

修改后的完整代码 #

<style>
.center {
  margin-left: auto;
  margin-right: auto;
}

table {
  border-collapse: separate;
  border-spacing: 10px 20px;
  width: 100%;
}

@keyframes rotateimgs {
  0% {
    opacity: 0;
  }
  33.33% {
    opacity: 1;
  }
  66.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

td {
  position: relative;
  --interval: 5s;
  width: 50%;
}

img.fadeinout {
  position: absolute;
  top: 0;
  left: 0;
  animation-name: rotateimgs;
  animation-duration: calc(var(--interval) * 3);
  animation-iteration-count: infinite;
  opacity: 0;
  max-width: 100%;
  height: auto;
}

img.fadeinout:nth-child(1) {
  animation-delay: 0s;
  position: relative; /* 用第一张图片撑开单元格高度 */
}

img.fadeinout:nth-child(2) {
  animation-delay: var(--interval);
}

img.fadeinout:nth-child(3) {
  animation-delay: calc(var(--interval) * 2);
}

@media (max-width: 768px) {
  table {
    border-spacing: 5px 10px;
  }
}
</style>
   
<body> 
  <table class="center" style="max-width:100%"> 
   
  <tr>
    <td>
        <img class="fadeinout" src="/image1.jpg"/>
        <img class="fadeinout" src="/image2.jpg"/>
        <img class="fadeinout" src="/image3.jpg"/>
    </td>
    
    <td>
       <img class="fadeinout" src="/image4.jpg"/>
       <img class="fadeinout" src="/image5.jpg"/>
       <img class="fadeinout" src="/image6.jpg"/>
    </td>
  </tr>
    
<tr>
  <td> 
     <img class="fadeinout" src= "/image7.jpg"/>
     <img class="fadeinout" src="/image8.jpg" />
     <img class="fadeinout" src="/image9.jpg" />
     
  </td>
 
  <td>
     <img class="fadeinout" src= "/image10.jpg"/>
     <img class="fadeinout" src="/image11.jpg"/>
     <img class="fadeinout" src="/image12.jpg"/>
     
  </td>
</tr>
 
</table> 
</body>

原理说明 #

• max-width:100%; height:auto; 确保图片不会超出容器宽度，同时保持原有宽高比，避免拉伸变形。
• td { width:50%; } 让每行的两个单元格平分表格宽度，在手机端自动缩小适配。
• 媒体查询针对小屏幕调整间距，提升移动端的视觉舒适度。

内容的提问来源于stack exchange，提问作者Ron