html - 如何使div的高度等于宽度

Question

我有 3 个带有 display:inline-block 的 div。每个 div 将宽度设置为 30%，将高度设置为 75%。问题是宽度大于高度，我希望它是相同的 (1:1)。只能用CSS解决吗？

#our_services {
    height: 350px;
    text-align: center;
    font-family:"open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
    color: black;
    background-color: rgb(224, 224, 224);
    overflow: auto;
    margin: auto;
}
#try {
    background-color: rgb(224, 224, 224);
    width:60%;
    height:70%;
    margin:auto;
}
#product1 {
    width: 30%;
    height: 75%;
    position: relative;
    background-color:green;
    display:inline-block;
    /* margin:5px; */
    border: 0px;
}
#product2 {
    width: 30%;
    height: 75%;
    background-color:orange;
    display:inline-block;
    /* margin:5px; */
    border: 0px;
}
#product3 {
    width: 30%;
    height: 75%;
    background-color:blue;
    display:inline-block;
    /* margin:5px; */
}

<div id="our_services" class="container">
    <h1></h1>
    <div id="try">
        <div id="product1"></div>
        <div id="product2"></div>
        <div id="product3"></div>
    </div>
</div>

Answer 1

试试这个。保持相同的宽度和高度。

#try{
background-color: rgb(224,224,224);
width:60%;
height:60%;
margin:auto;
}