React多端适配问题：非素食与素食图标缩放比例不一致求助

我正在构建适配移动端与Web端的React页面，在数据表格中添加了非素食（NON-VEG）和素食（VEG）图标。但在不同尺寸屏幕下，非素食图标缩放幅度大于素食图标，显示效果不一致。以下是不同屏幕尺寸的显示效果截图、React代码及CSS代码，恳请提供解决方案：

不同屏幕尺寸显示效果 #

• S尺寸屏幕显示效果：
  
• M尺寸屏幕显示效果：
  
• L尺寸屏幕显示效果：
  

React代码 #

<thead className='DVthead'>
        <tr className='DVtr'>
        <th className='DVth'>Food</th>
          <th className='DVth'><img src="https://user-images.githubusercontent.com/74299799/210125736-3e021162-9217-4f6c-9d61-f9aceaa6e468.svg" alt='NON-VEG' /></th>
          <th className='DVth'><img src="https://user-images.githubusercontent.com/74299799/210125735-9d1831f4-28e3-4a8a-885a-0493de559372.svg" alt='VEG'  /></th>
          <th className='DVth'>Total</th>
        </tr>
      </thead>

CSS代码 #

.DVtd, .DVth {
    border: 1px solid #ddd;
    padding: 20px;
}
.DVtr{
    color: #ffffff;
    border: 1px solid white;
    text-align: center;
}

.DVth {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
}

.DVth img {
    border-radius: 0px;
    width: 100%;
    image-rendering: pixelated;
}

问题核心是两个SVG原始尺寸比例不同，加上width:100%的自适应规则，导致缩放后显示不一致。以下是几种可行的解决方式：

方法1：固定图标基础尺寸+自适应限制 #

给图标设置固定基础宽度，同时用max-width确保小屏幕下不超出单元格：

.DVth img {
    border-radius: 0;
    width: 40px; /* 设置固定基础宽度 */
    max-width: 100%; /* 小屏幕下自动适配单元格宽度 */
    height: auto; /* 保持图标原始宽高比 */
    image-rendering: pixelated;
}

方法2：统一图标所在单元格宽度 #

给两个图标对应的表头单元格设置统一宽度，确保容器尺寸一致，再让图标自适应填充：

/* 给图标表头单元格添加专属类，统一宽度 */
.DVth.icon-col {
    width: 60px;
    text-align: center; /* 图标居中显示 */
}

.DVth img {
    border-radius: 0;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

同时修改React代码，给对应表头单元格添加类名：

<th className='DVth icon-col'><img src="https://user-images.githubusercontent.com/74299799/210125736-3e021162-9217-4f6c-9d61-f9aceaa6e468.svg" alt='NON-VEG' /></th>
<th className='DVth icon-col'><img src="https://user-images.githubusercontent.com/74299799/210125735-9d1831f4-28e3-4a8a-885a-0493de559372.svg" alt='VEG'  /></th>

方法3：统一SVG的viewBox属性（需编辑SVG文件） #

如果能修改SVG源文件，将两个图标的viewBox属性设置为相同值（比如0 0 24 24，根据图标实际尺寸调整），确保它们的原始画布尺寸一致。这样即使设置width:100%，两者的缩放比例也会完全同步。

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