响应式网站移动端画廊图片显示尺寸不一致问题求解

• 响应式站点PC端画廊显示正常，完成安卓、iPhone双端移动端测试后发现，画廊区域图片出现逐张放大的异常，所有图片源文件实际尺寸完全一致。
• 效果参考：
  
  
  

CSS代码 #

@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; height: 100%; }
@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

HTML代码 #

<tr><td align="center" valign="middle"><a href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank"><img src="/images/weddings/Bridal_Shoot.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Bridal Shoot</a></td>
    <td align="center" valign="middle"><a href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank"><img src="/images/weddings/Butler_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Butler Wedding</a></td>
    <td align="center" valign="middle"><a href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank"><img src="/images/weddings/Engagement_Session.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Engagement Session</a></td>
    <td align="center" valign="middle"><a href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank"><img src="/images/weddings/Fluke–Chenault_Wedding.jpg" alt="Click on image to open gallery" width="235" height="352" class="z-depth-2 rounded-circle img-fluid"/><BR>Fluke–Chenault Wedding</a></td>
</tr>

1. 全局图片样式设置错误：img { height: 100%; }是核心诱因。当前画廊采用table布局，移动端下未给td设置固定高度，height:100%会让图片高度继承父容器的动态计算值，加上table自动布局的列宽计算偏差会逐列累计，最终出现图片逐张放大的现象。
2. 响应式图片实现方式兼容性差：通过CSScontent属性替换img的加载资源，在移动端Webkit内核浏览器（安卓Chrome、iOS Safari）中渲染逻辑不一致，会打乱图片的默认尺寸计算。
3. Table自动布局的固有缺陷：默认table-layout: auto模式下，表格会根据单元格内容动态分配宽度，小屏幕下宽度不足时列宽偏差会逐列累加，无法保证所有单元格尺寸一致。
4. Bootstrap样式被覆盖：之前使用Bootstrap的img-fluid类出现图片变形，是因为自定义的全局img { height:100%; }优先级高于img-fluid默认的height: auto规则，破坏了图片的原始宽高比。

按以下步骤调整即可解决问题，不会影响页面其他图片的显示：

1. 修正全局图片基础样式，将错误的高度设置改为自动，保证图片默认按原始比例渲染：

img { 
  max-width: 100%; 
  height: auto; /* 替换原代码中的height: 100% */
}

2. 删除两段通过CSScontent属性替换响应式图片的媒体查询代码，这类写法兼容性极差。响应式图片需求建议用原生<picture>标签或srcset属性实现。
3. 给画廊表格增加专属类名，添加移动端布局重置规则，避免影响页面其他表格：
   首先给画廊对应的table标签添加类：

<table class="gallery-table">
<!-- 原有tr、td内容不变 -->
</table>

然后在768px断点的媒体查询中追加以下规则：

@media screen and (max-width: 768px) {
  #primary { width:100%; }
  #secondary { width:100%; margin:0; border:none; }
  /* 新增画廊表格布局规则 */
  .gallery-table {
    width: 100%;
    table-layout: fixed; /* 固定表格布局，强制列宽平均分配，消除累计偏差 */
  }
  .gallery-table td {
    width: 50%; /* 移动端每行显示2张图，如需每行1张改为100%即可 */
    padding: 12px 8px;
  }
  .gallery-table img {
    width: 100%;
    aspect-ratio: 1/1; /* 匹配rounded-circle需要的正方形比例，如需保留原竖图比例改为235/352 */
    object-fit: cover; /* 保证图片填充容器时不变形，自动裁剪多余部分 */
  }
}

4. 调整后即可正常使用Bootstrap的img-fluid类，不会再出现图片变形问题，全局height:auto规则和Bootstrap默认逻辑完全一致。

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