Html SVG剪裁背景缩放-如何保持纵横比？

柱组件的背景应与容器成比例，并保持纵横比=始终保持完美的圆形，就像剪切路径形状一样。稍后我希望剪切路径的形状更复杂，但出于演示目的，我使用了圆形

这就是它现在的样子：

应该是这样的：

如何使形状始终保持在正确的纵横比，并随柱缩放

正文{
背景图像：url（“https://i.imgur.com/M6tL2a8.png");
背景尺寸：封面；
背景位置：50%50%；
背景附件：固定；
颜色：#fff；
}
.行{
宽度：100%；
最小高度：300px；
}
.栏目{
宽度：40%；
身高：100%；
最小高度：300px；
显示：内联块；
边框：1px虚线#555；
}
.气泡容器{
位置：相对位置；
显示：块；
宽度：100%；
身高：100%；
最小高度：300px；
}
.气泡容器p{
文本对齐：居中；
文本转换：大写；
颜色：#fff；
字体大小：粗体；
字体大小：20px；
文本阴影：1px 1px 1px#000；
}
.U背景{
位置：相对位置；
显示：块；
最小宽度：100%；
最小高度：自动；
背景图像：线性渐变（到底部，rgba（255,0,0,0.2）0%，rgba（0,0,0,0）100%），url（“https://i.imgur.com/M6tL2a8.png");
背景尺寸：封面；
背景位置：50%50%；
背景附件：固定；
-webkit剪辑路径：url（#剪辑_圈）；
剪辑路径：url（剪辑圆圈）；
过滤器：模糊（3px）；
文本对齐：居中；
}

第1列

第1列

我参考了下面的答案，并应用它来获得解决方案

如果我们想要和高度一样的宽度。我们只需要将宽度设置为一个百分比或值，并将填充顶部设置为相同的值

正文{
背景图像：url（“https://i.imgur.com/M6tL2a8.png");
背景尺寸：封面；
背景位置：50%50%；
背景附件：固定；
颜色：#fff；
}
.行{
宽度：100%；
最小高度：300px；
}
.栏目{
宽度：40%；
身高：100%；
最小高度：300px；
显示：内联块；
边框：1px虚线#555；
}
.气泡容器{
位置：相对位置；
显示：块；
宽度：100%；
身高：100%；
最小高度：300px；
}
.气泡容器p{
文本对齐：居中；
文本转换：大写；
颜色：#fff；
字体大小：粗体；
字体大小：20px；
文本阴影：1px 1px 1px#000；
}
.U背景{
位置：相对位置；
显示：块；
宽度：100%；
填充顶部：100%；
背景图像：线性渐变（到底部，rgba（255,0,0,0.2）0%，rgba（0,0,0,0）100%），url（“https://i.imgur.com/M6tL2a8.png");
背景尺寸：封面；
背景位置：50%50%；
背景附件：固定；
-webkit剪辑路径：url（#剪辑_圈）；
剪辑路径：url（剪辑圆圈）；
过滤器：模糊（3px）；
文本对齐：居中；
}

第1列

第1列

这正是我想要的——你救了我一天；）