Setting height to width

Question

Lets say i have a div

div {
  float: left;
  width: 447px;
  height: 447px;
  background-color: blue;
  margin-left: 1.3%;
  margin-top: 1.3%;
  max-width: 23.4%;
  max-height: 47%;
}

<div></div>

The div is box-shaped , it has same width and height. But as the browser keep resizing and screen getting smaller due to max-width and max-height set to % value i wont have to use media queries but the ratio between width and height gets more and more different. So lets say the screen size is 1440x900 , the calculation of width and height will be different and box shape will get destroyed to rectangle.

Is there a way how to keep the div box shaped without using extra mediaqueries?

[Google box square css or so](https://spin.atomicobject.com/2015/07/14/css-responsive-square/) — GolezTrol, May 12 '16 at 20:55

Nenad Vracar · Answer 1 · 2016-05-12T21:02:27.600

3

You can use viewport units and set height and width to same vw for example.

div{
  width: 40vw;
  height: 40vw;
  background-color: blue;
}

<div></div>

Too keep square inside screen boundaries you can add max-height and max-width in vh units

body, html {
  margin: 0;
  padding: 0;
}
div{
  width: 60vw;
  height: 60vw;
  max-height: 100vh;
  max-width: 100vh;
  background-color: blue;
}

<div></div>

edited May 12 '16 at 21:02

answered May 12 '16 at 20:57

Nenad Vracar

118,580
15
151
176

1

That will keep it square, but not within the screen boundaries if that would be necessary. – GolezTrol May 12 '16 at 20:58
You can always use `40vmin` if that is a requirement. – Robert McKee May 12 '16 at 21:01

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Viewport unit options are almost universally supported at this point.

http://caniuse.com/#feat=viewport-units

However, you could also use javascript/JQuery.

function onResize() {
    var el = $('#element');
    el.height(el.width());
}
$(window).resize(onResize);
$(document).ready(onResize);

Note, your question is definitely a duplicate.

edited May 23 '17 at 12:16

Community

1
1

answered May 12 '16 at 20:59

abalter

9,663
17
90
145

Robert McKee · Answer 3 · 2016-05-12T21:35:05.320

0

div{
  width: 40vmin;
  height: 40vmin;
  background-color: blue;
  display: inline-block;
}
div+div { background-color: green; }

<div></div><div></div>

edited May 12 '16 at 21:35

answered May 12 '16 at 21:03

Robert McKee

21,305
1
43
57

in a scenario , where multiple divs are in the row , it destroys the whole positioning. – Darlyn May 12 '16 at 21:15
@trolkura I'm not sure what you mean by destroying the positioning. It works exactly how it is supposed to. If you want them side by side, then use `display: inline-block`. Updated answer to show that. – Robert McKee May 12 '16 at 21:36

Setting height to width

3 Answers3