Css div responsive square dependent on height

Question

I'm looking for a solution how to draw a responsive square, where will be height given in %.

<div class="square"></div>

//CSS
.square{
  background: red;
  height: 49%;
  //and what else make this div square I found many solutions how to make it but it is dependent on width :(
}

viewport: <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

and wrapper of this square is another div with this css:

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;

49% of what? The viewport, it's parent? – Paulie_D Oct 29 '15 at 11:52 — Paulie_D, Oct 29 '15 at 11:52
I udjasted information please check. – balicekt Oct 29 '15 at 12:00 — balicekt, Oct 29 '15 at 12:00

score 1 · Accepted Answer · answered Oct 29 '15 at 11:57

1

Aspect ratio can be controlled by using the padding-bottom trick.

Note however that this technique means that you cannot have additional inline content inside the child div.

div.parent {
  width: 80%;
  background: #c0ffee;
  margin: 25px auto;
}
.parent >div {
  width: 49%;
  padding-bottom: 49%;
  background: #000;
}

<div class="parent">
  <div></div>
</div>

If size in relation to the viewport is required the viewport units exist for this.

div {
  width: 49vh;
  height: 49vh;
  background: #c0ffee;
  margin: 25px auto;
}

<div>
</div>

answered Oct 29 '15 at 11:57

Paulie_D

107,962
13
142
161

that is what I found I need to set height: 49% I don't know width – balicekt Oct 29 '15 at 12:03
OOO thank you 49vh did the trick. awesome THANK YOU!! I have never heard about "vh" before – balicekt Oct 29 '15 at 12:05

score 0 · Answer 2 · answered Oct 29 '15 at 11:52

0

Height given in percentage is calculated on the basis of its total width. As width changes, height also changes.

answered Oct 29 '15 at 11:52

Navaj Mulla

19
2

Css div responsive square dependent on height

2 Answers2

Linked