为何SVG按比例缩放时OBJECT元素仍占HTML宽度100%？

当SVG图像按比例缩小（高度缩小，宽度对应按比例调整）时，承载它的<object>标签宽度依然占据HTML的100%宽度，这是为什么？

原因分析 #

1. <object>作为替换元素，在flex布局中默认会拉伸填充父容器的可用宽度，即使内部SVG已按比例缩小，它本身的尺寸仍会优先匹配父容器的宽度设置。
2. 父容器.field__item设置了flex-basis:100%，且未对<object>施加宽度限制，同时容器内的align-content属性不适合单行flex布局，无法约束子元素的拉伸行为。
3. 如果SVG文件本身缺少viewBox属性，会导致无法正确识别原始宽高比，进一步加剧尺寸匹配的问题。

解决方案 #

1. 调整<object>的CSS样式 #

给#crest添加宽度限制和对齐规则，避免它被父容器强制拉伸：

#crest {
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: 3;
    animation-timing-function: linear;
    max-width: 100%;
    height: auto;
    align-self: center;
}

• max-width:100%：限制<object>宽度不超过父容器的可用空间
• height:auto：确保SVG按原始宽高比自动调整高度
• align-self:center：让<object>在flex父容器中保持自身内容宽度，不被拉伸

2. 修正父容器的flex对齐属性 #

将.field__item中的align-content改为align-items（单行flex布局下，align-items才是控制子元素交叉轴对齐的正确属性）：

.field__item {
    display: flex;
    order: 3;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    max-height: 100%;
    padding: 1em;
}

3. 确保SVG包含viewBox属性 #

检查你的coa.svg文件，确保根<svg>标签包含viewBox属性，这是SVG实现等比缩放的核心：

<svg viewBox="0 0 [原始宽度] [原始高度]" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG内容 -->
</svg>

viewBox定义了SVG的坐标系统范围，浏览器会根据这个范围自动计算缩放比例。

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