1

I'm trying to design a wesite for mobile with a button in the top left corner, which is set to 100% height of the parent object. The width should be the same as the height, but I found only solutions with JS or JQuery. I like to have something like:

.hamburger {
    height: 100%;
    width: height;
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
mannaris
  • 63
  • 8
  • this was not a duplicate of how to maintain aspect ratio in css but the exact opposite since reference to start with is height and **not width**. . **CSS cannot do this** It requires javascript to extract height value and apply it to width on the fly. – G-Cyrillus May 01 '16 at 15:01

1 Answers1

0

The solution is that a height of 9% of the viewport match with 9vh. The parent was 9% of the viewport height, the child 100% of the parent's height. To become a perfect square you set the width to 9vh. 1vh is equal to the 100. part of the viewport height. So now you can scale the viewport to any size and have always a sqare.

mannaris
  • 63
  • 8