使用相对高度和宽度的div来创建可缩放的圆形背景。

我有一个圆形的背景，我想让它的尺寸是动态的。

例如，为了得到完美的圆，我需要宽度等于高度，但我还需要每行只有3个项目，

所以我不确定我现在的思路是否是解决我的问题的最佳方案，但如果我能让高度等于宽度，那对我来说可能行得通，我了解到这个问题：

CSS: Keeping a div's height relative to its width

Maintain the aspect ratio of a div with CSS

这些在我的使用情况下不起作用。

将发布一个图片进行视觉辅助（这个图片来自设计而不是网站）

    
        
Every Business has a story they want to tell about their brand. We at Lion Marketing
            Understand the uniqueness of every business and therefore works efficiently to create
            your Brands stories that align with our core values as a company.
                    
                        
RESEARCH
                        Before starting any task, we begin with research into to current trends, our clients brand’s and
                    
                        
RESEARCH
                        Before starting any task, we begin with research into to current trends, our clients brand’s and
                Hover over me
                    Tooltip text

.tooltips{
    display: flex;
    justify-content: center;
}
.con-tooltip {
    width: 250px;
    height: 250px;
    margin: 50px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    position: relative;
    background: #F2D1C9;
    padding: 0 20px;
    transition: all 0.3s ease-in-out;
    cursor: default;
}
.con-tooltip img{
    width: 109px;
    height: 109px;
    margin: auto;
}
/*tooltip */
.tooltip {
    visibility: hidden;
    z-index: 1;
    opacity: .40;
    width: 100%;
    padding: 0px 20px;
    background: #333;
    color: #E086D3;
    position: absolute;
    top:-140%;
    left: -25%;
    border-radius: 9px;
    font: 16px;
    transform: translateY(9px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}
/* tooltip  after*/
.tooltip::after {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #333 transparent transparent transparent;
    position: absolute;
    left: 40%;
}
.con-tooltip:hover .tooltip{
    visibility: visible;
    transform: translateY(-10px);
    opacity: 1;
    transition: .3s linear;
    animation: odsoky 1s ease-in-out infinite  alternate;
}
@keyframes odsoky {
    0%{
        transform: translateY(6px);
    }
    100%{
        transform: translateY(1px);
    }
}
/*hover ToolTip*/
.left:hover {transform: translateX(-6px); }
.top:hover {transform: translateY(-6px);  }
.bottom:hover {transform: translateY(6px);}
.right:hover {transform: translateX(6px); }
.bottom .tooltip { top:115%; left:-20%; }
.bottom .tooltip::after{
    top:-17%;
    left:40%;
    transform: rotate(180deg);
}