如何调整Flex布局中指定SVG尺寸，使其匹配其他Logo且适配移动端？

核心问题分析 #

当前全局的.text-image img { width:95% }会统一控制三个SVG的尺寸，直接给SVG加行内样式无法生效，是因为.text-image为绝对定位且未设置明确尺寸，导致SVG的max-width在桌面端无法约束实际显示尺寸；移动端模糊则是因为强制缩小后，SVG没有基于合适的父容器尺寸渲染。

解决方案 #

1. 精准定位第三个盒子的SVG（推荐）

使用CSS的:nth-child(3)选择器，仅针对第三个Flex项内的SVG设置样式，不会影响另外两个：

/* 单独缩小第三个信息盒子里的SVG */
.infoboxemain .infoflexbox .infoboxes:nth-child(3) .text-image img {
    width: 70%; /* 按需调整，比全局的95%小即可缩小 */
    max-width: 80px; /* 可选，限制桌面端最大宽度，避免过度放大 */
    height: auto; /* 保持SVG宽高比，防止变形 */
}

如果需要进一步优化渲染清晰度，给第三个盒子的.text-image设置明确宽度，让SVG基于固定容器尺寸渲染：

.infoboxemain .infoflexbox .infoboxes:nth-child(3) .text-image {
    width: 80px; /* 或根据布局需求设置百分比 */
}

2. 检查SVG自身的viewBox属性（辅助优化）

如果调整CSS后仍有模糊，检查第三个SVG的viewBox属性是否正确，示例：

<svg viewBox="0 0 200 200" ...> <!-- 替换为SVG实际的宽高比例 -->

正确的viewBox能确保SVG在缩放时保持矢量清晰度，不会出现模糊或变形。

无效原因说明 #

• 直接给SVG加行内max-width：因为.text-image是绝对定位且无明确尺寸，桌面端SVG仍会继承父容器的隐含尺寸（等同于.image-container的宽度），所以max-width无法生效；移动端父容器尺寸变小，max-width强制缩小SVG，但因没有基于合适的容器尺寸渲染，导致模糊。
• 修改全局.text-image img：会同时改变三个SVG的尺寸，不符合需求。

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