Css 如何使svg元素响应其父容器？

我正试图做到这一点： 在div内部呈现一个w:h=1:1矩形的svg正方形， 当div的宽度大于高度时，正方形应适合容器的高度红色框为div，绿色框为svg正方形：

当div的高度大于宽度时，乡绅应按以下宽度装入容器：

通过指定svg视图端口的大小可以很容易地实现这一点。但是，如果我删除svg视图端口的大小，而不是将该大小添加到父分割框中，它会拒绝查看容器的高度，图像会变成：

有没有办法使正方形对容器高度作出反应？ 这是我的密码：

主要{ 宽度：400px； 高度：100px； 边框：4倍纯红； } 只需将SVG的宽度和高度属性设置为100%。在SVG中，或者通过CSS

其次，修复其他属性：

viewBox值不应包含逗号。 它是PreserveSpectratio，而不是PreserveSpect，满足，而不是满足 主要{ 宽度：400px； 高度：100px； 边框：4倍纯红； } 只需将SVG的宽度和高度属性设置为100%。在SVG中，或者通过CSS

其次，修复其他属性：

viewBox值不应包含逗号。 它是PreserveSpectratio，而不是PreserveSpect，满足，而不是满足 主要{ 宽度：400px； 高度：100px； 边框：4倍纯红； }

---

谢谢你，保罗，你的回答很好。我刚刚修正了属性，谢谢你的提醒。谢谢你，保罗，你的回答很好。我刚刚修正了属性，谢谢你的提醒。