Get a Circles Width Defined by a Percent in Pixels and apply them to the Height Value

Question

After 4 hours of trial and errors, I cannot find a way to get the width of the circle that is defined by a percent and convert it to pixels and make the circles height the same size as the width in pixels. Below is what I have right now. (I have tried many variations of this but cannot figure it out) Right now it only works on my screen. I try it on other devices and the height is just not right. This button is created onload.

Example: Circle Width = 12% , the Pixel Value of 12% on a screen is "70px". So somehow make Circle Height = 70px.

<!DOCTYPE html>
<head>
    <title>Circle Test</title>
    <meta charset='UTF-8'>
    <script type="text/javascript" src="/js/fs"></script>
</head>
<body>
</body>
</html>

 // Creates a button
var mainButton = document.createElement("button");

mainButton.style.width = "10%";

// Get the Screens Avaliable Width and Get 10% of it and convert it to pixels
var wad = screen.availWidth * .1 + "px";

// Thinking this would return the pixel amount the circle button is, but it only works on the regular screen and not when resized. It also does not work for mobile. 

console.log(wad);
mainButton.style.height = wad;

If you're working with **circles**, they have the same `width` and `height`, it is on of aspects, that makes them **circles**. — P.S., Jan 07 '18 at 04:57
That's what I'm trying to accomplish. My "Circles" are "Ovals" right now. — GoofBall101, Jan 07 '18 at 04:58

AuxTaco · Accepted Answer · 2018-01-07T08:02:52.410

You set the width of your button to 10% of its containing block's width, and the height to 10% of the width of one of

The available area of the rendering surface of the output device, in CSS pixels.

The area of the output device, in CSS pixels.

The area of the viewport, in CSS pixels.

It's very likely that these are measurements of two different things, or that resizing the window will affect one but not the other. Fortunately, CSS has a unit for "percentage of the window's width": vw. Set your button's height and width in vw units, and you don't need any JavaScript:

button {
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
}

<button>Go</button>

If you really meant that the button is 10% as wide as its container, even if its container isn't as wide as the whole window, you can use the padding-bottom technique detailed in this answer. Unlike height, percentages in padding refer to the width of the containing block:

.wrapper {
  width: 40%; /* here I use 40% instead of 10% for aesthetics */
  padding-bottom: 40%; /* should match width */
  position: relative;
}

.wrapper > button {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  border-radius: 50%;
}

/* the rest is just to make figuring out
the exact width of the button difficult */

body {
  display: flex;
  align-items: stretch;
  height: 90vh;
}

body > div {
  flex: 1 1 0;
  background: rebeccapurple;
  margin: 0 4px;
}

<div>
  <div class="wrapper"><button>Go</button></div>
</div>
<div></div>
<div></div>

And finally, just for completeness, if you really must get the computed width from JavaScript, you can use window.getComputedStyle:

let button = document.querySelector('button');
let width = window
  .getComputedStyle(button)
  .getPropertyValue('width');
console.log(button.style.height = /* DO NOT DO THIS */ width);

button {
  width: 40%;
  border-radius: 50%;
}

/* the rest is just to make figuring out
the exact width of the button difficult */

body {
  display: flex;
  align-items: stretch;
  height: 90vh;
}

body > div {
  flex: 1 1 0;
  background: rebeccapurple;
  margin: 0 4px;
}

<div>
  <button>Go</button>
</div>
<div></div>
<div></div>

If you try putting that into a resize handler, though, performance will suffer.

Get a Circles Width Defined by a Percent in Pixels and apply them to the Height Value

1 Answers1