CSS width in % and height in px and both same length

Question

What I try to make is square that change size with the size of the screen.

So I have the width set to 25%. How do I make sure that the height keeps the same length in px as the width?

Thanks in advance.

Duplicate of so many questions, try searching harder next time. — Etheryte, Mar 19 '14 at 13:25

score 6 · Accepted Answer · edited May 23 '17 at 12:16

6

You could use top/bottom padding property in percentage, to achieve the result.

Example Here.

.box {
    width: 25%;
    padding-bottom: 25%;
}

A percentage value on top/bottom padding or margins is relative to the width of the box's containing block.

8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'

<percentage> The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

Adding the content

Since the the height of the box grows by adding content, we could wrap the content by an element .wrapper and position that absolutely relative to the box, and then use top, right, left and bottom properties to fill the entire space of the box.

Example Here

<div class="box">
  <div class="wrapper">
    <!-- content goes here... -->
  </div>
</div>

.box {
  width: 25%;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  padding-top: 100%; /*  1:1 square */
}

.box > .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

For further information you could refer my answer here (Responsive Container section).

edited May 23 '17 at 12:16

Community

1
1

answered Mar 19 '14 at 13:25

Hashem Qolami

97,268
26
150
164

works here http://jsfiddle.net/u2Qbk/ – Huangism Mar 19 '14 at 13:27
No idea why that was down-voted, that's the solution I would use, and the square re-sizes nicely. – Ben Mar 19 '14 at 13:27
4

It works until content is added..http://jsfiddle.net/Paulie_D/u2Qbk/1/ – Paulie_D Mar 19 '14 at 13:28
@Paulie_D I've explained how to add the content in the posted link. – Hashem Qolami Mar 19 '14 at 13:29
@Paulie_D You're right, here's an updated example of your code to fix the content issue http://jsfiddle.net/trzFs/ – Daniel Schwarz Mar 19 '14 at 13:33
@Paulie_D Updated the answer to fix the content issue. – Hashem Qolami Mar 19 '14 at 13:46

score 0 · Answer 2 · answered Mar 19 '14 at 13:30

0

you may set the width value as a percentage, then grab it with jquery then let it to be the height value. see this

var box = $(".box");
var width = box.css("width");
box.css("height", width);

http://jsfiddle.net/DPYcg/1/

answered Mar 19 '14 at 13:30

Ahmedskaya

389
1
10

score 0 · Answer 3 · edited May 23 '17 at 12:20

To be able to add contents, you may use pseudo element and floats behavior : http://codepen.io/anon/pen/fklAr/

div {
  width:25%;
  background:red;
  margin:auto;
}
div:before, div:after {
  content:'';
}
div:before {
  float:left;
  padding-top:100%;
}
div:after {
  display:block;
  clear:both;
}

maybe a duplicate if you want to center content : Center content in the middle of div container

CSS width in % and height in px and both same length

3 Answers3

Adding the content