Is there a way to make three divs, each with the CSS property display:inline-block, have a 1:1 ratio of width to height using only CSS? Currently, the width is set to 30% and the height to 75%, causing the width to be greater than the height.
#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>