Javascript 在这种情况下，如何计算填充？需要它使长度和宽度相同_Javascript_Html_Css_Web

Javascript 在这种情况下，如何计算填充？需要它使长度和宽度相同

javascript html css web

Javascript 在这种情况下，如何计算填充？需要它使长度和宽度相同,javascript,html,css,web,Javascript,Html,Css,Web,我试图用css画一个圆圈。我希望它保持1:1的纵横比，即使在调整浏览器大小时也是如此。但是，为了达到1:1的比例，我很难使宽度等于高度。我尝试过很多方法，从JS到纯CSS，但似乎都不管用。我的目标是让ID为'circ1'-'circ4'的锚具有1:1的纵横比。目前，我有宽度作为百分比，高度作为任意像素计数，我的眼球。我知道我可以用这个来做1:1的比例：但我也知道填充物是基于容器的，这是我似乎无法理解的部分这是有问题的网站。主体中的圆圈是我试图使之成为“真正的圆圈”，当浏览器调整大小时，这些圆

我试图用css画一个圆圈。我希望它保持1:1的纵横比，即使在调整浏览器大小时也是如此。但是，为了达到1:1的比例，我很难使宽度等于高度。我尝试过很多方法，从JS到纯CSS，但似乎都不管用。我的目标是让ID为'circ1'-'circ4'的锚具有1:1的纵横比。目前，我有宽度作为百分比，高度作为任意像素计数，我的眼球。我知道我可以用这个来做1:1的比例：

但我也知道填充物是基于容器的，这是我似乎无法理解的部分

这是有问题的网站。主体中的圆圈是我试图使之成为“真正的圆圈”，当浏览器调整大小时，这些圆圈也会保持为圆圈

这是我的HTML的布局，我认为这是问题的根源，因为锚点嵌套了多次，每次我尝试使用“padding”时，它都会被抛出，因为我不确定padding基于哪个容器

<body>
    <div id = "main">
    <div id = "yolo">Check some stuff out!</div>
    <div id = 'circles'>
    <a id = "circ1" href = #> <!--here is the anchor which I want to be 1:1-->
    <img class = app src = 'applogo.png' width = 80% height = 80%><div id = "taco">
    Applocity</div>
    </a>
    <a id = "circ2" href = #>
    <img class = python src = 'pyth.png' width = 85% height = 85%><div id = 'burr'>
    Pythings</div>
    </a>
    <a id = "circ3" href = #>
    <img class = calc src = 'calculator.png' width = 85% height = 85%><div id = 'churr'>
    Calculator Programs</div>
    </a>
    <a id = "circ4" href = #>
    <img class = fold src = 'folder.png' width = 80% height = 80%><div id = 'purr'>
    Miscellaneous</div>
    </a>
    </div>
  </div>
  </div>



</body>

提前感谢。

更改

宽度：15%至宽度：175px在#circ1

即
在调整大小时给元素一个恒定的纵横比有点棘手。看看
您希望给每个锚定一个父div，并给这些父div一个基于百分比的填充底部。为锚定提供绝对定位，并根据父div的大小调整锚定的大小（top:0；bottom:0；left:0；right:0；
）。请注意，调整大小时，纵横比如何保持为1:1
希望这有帮助 他想让他们调整尺寸。这会给他们一个固定的尺寸。不，它不会给它一个固定的尺寸，我试过了，它的工作。设置175px的宽度和175px的高度是固定的。我也尝试过，但并没有像预期的那样调整大小……问题是，我的锚都是相对定位的，需要保持这样。
<body>
    <div id = "main">
    <div id = "yolo">Check some stuff out!</div>
    <div id = 'circles'>
    <a id = "circ1" href = #> <!--here is the anchor which I want to be 1:1-->
    <img class = app src = 'applogo.png' width = 80% height = 80%><div id = "taco">
    Applocity</div>
    </a>
    <a id = "circ2" href = #>
    <img class = python src = 'pyth.png' width = 85% height = 85%><div id = 'burr'>
    Pythings</div>
    </a>
    <a id = "circ3" href = #>
    <img class = calc src = 'calculator.png' width = 85% height = 85%><div id = 'churr'>
    Calculator Programs</div>
    </a>
    <a id = "circ4" href = #>
    <img class = fold src = 'folder.png' width = 80% height = 80%><div id = 'purr'>
    Miscellaneous</div>
    </a>
    </div>
  </div>
  </div>



</body>

#circ1 {
  background: #ff8300;
  height: 175px; //arbitrary value which I want to equal to 15% width converted to pixels
  width: 15%;
  border-radius: 50%;
  position: relative;
  margin:65px 0px 100px 12%;
  float: left;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;


}

#circ1 {
 background: #ff8300;
 height: 175px;
 width:175px;
 border-radius: 50%;
 position: relative;
 margin:65px 0px 100px 12%;
 float: left;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
 -ms-transition: all 500ms ease-in-out;
 -o-transition: all 500ms ease-in-out;
 transition: all 500ms ease-in-out;


 }