How to make div's height equal to the width

Question

I have 3 divs with display:inline-block. Each div set width to 30%, and height to 75%. The problem is that the width is bigger than the height and i want it to be the same (1:1). Can I solve it only by 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>

possible duplicate of [CSS maintain div aspect ratio](http://stackoverflow.com/questions/1495407/css-maintain-div-aspect-ratio) — rnevius, Apr 29 '15 at 11:32
for this to work you parent element would have to be the same height and width since that is what the percentage value for the child elements relate to — deowk, Apr 29 '15 at 11:33

score 1 · Answer 1 · answered Apr 29 '15 at 11:52

1

try this.keep same size for width and height.

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

answered Apr 29 '15 at 11:52

Kevin Andrid

1,963
1
15
26

score 1 · Answer 2 · answered Apr 29 '15 at 12:06

If you want to set the ratio (1:1) as square, try to use the css tricks:

.wrap {
  overflow: hidden;
}
.square {
  width: 33%;
  height: 0;
  padding-bottom: 33%;
  float: left;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.green {
  background-color: green;
}

<div class="wrap">
  <div class="square red"></div>
  <div class="square blue"></div>
  <div class="square green"></div>
</div>

Set height to 0 and width and padding-bottom to the same values.

How to make div's height equal to the width

2 Answers2