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

How is padding calculated in this situation? Need it for making length and width same

本文关键字：何计算 这种情况下 填充 计算      更新时间：2023-09-26

我正在尝试使用css创建一个圆圈。我希望它保持1:1的宽高比，即使当浏览器调整大小。然而，为了达到1:1的比例，我在使宽度等于高度方面遇到了麻烦。我尝试了从JS到纯CSS的许多方法，但它们似乎都不起作用。我的目标是让id为"circ1"-"circ4"的锚具有1:1的宽高比。目前，我有宽度作为一个百分比和高度作为一个任意像素计数，我的眼球。我知道我可以使用下面的示例代码创建1:1的比例:

div {
  background:orange;
  width:20%;
  padding-top:20%;
}

但是我也知道填充是基于容器的，这是我似乎不能弄清楚的部分。

这是有问题的网站。正文中的圆圈是我试图做成的"真正的圆圈"，当浏览器调整大小时，它们也会保持圆形。

http://www.somil.site90.net

这是我的HTML布局，我认为这是问题的根源，因为锚是嵌套多次，每次我尝试使用'填充'它被抛出，因为我不确定填充是基于哪个容器。

<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的css。其他圆圈的css样式几乎相同，但可以在上面列出的站点的页面源代码(CTRL+F "circ2/3/4")中看到。

#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中的width:15%;改为width:175px;

ie 

#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;

 }

在调整大小时给元素一个恒定的长宽比有点棘手。看一下这个JSFiddle

你想给每个锚一个父div，并给这些父div一个基于padding-bottom的百分比。给锚定绝对位置，并将它们的大小设置为父div的大小(top: 0; bottom: 0; left: 0; right: 0;)。请注意，当您调整大小时，宽高比保持为1:1。

希望这对你有帮助。

相关文章：