Javascript 如何使用css使高度与宽度相等

如何使用css使高度与宽度相等

我有这样的HTML：

<div style="width:900px;height:200px;">
<a style="display:block; float:left; width:35%; background:green"></a>
</div>

---

现在，我想让

a

元素的高度等于宽度（35%）。我该怎么做？谢谢你的帮助。

好吧，我有：

<div class='box'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div>

.box{
    background:#000;
    position: relative;
    width: 50%;     /* desired width */
}
.box:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

HTML:

<div class='box'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div>

.box{
    background:#000;
    position: relative;
    width: 50%;     /* desired width */
}
.box:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

JSFiddle:

你可以根据自己的需要调整它

---

和…在谷歌上搜索一下不会有什么坏处：

使用

window.getComputedStyle

获得计算出的宽度，然后进行计算以获得与宽度大小相同的相等百分比

HTML

请注意，锚点元素的高度将大于div高度，要将其保持在父元素内，必须将其缩小

---

你的意思是你想按比例调整它的大小？当宽度是一个百分比时，他希望高度等于宽度。好吧，我可以把高度：自动。。。但我会检查一些东西Phe有javascript标记和标题：“使用css”，我将等待一个ans…：P你用js做的，我用CSS做的…：普威尔。我在找这个。非常感谢Patrick Evans。第二部分有错误，请编辑以解决。Ikillnukes。很抱歉只有css不能解决这个问题。感谢所有建议。这根本不能满足他的要求，内部元素的宽度和高度不一样，您只是简单地使父元素具有相同的高度和宽度。如果父元素具有相同的高度和宽度，并且您只指定了：这就是解决方案！是否？您缺少css内容。内容{位置：绝对；顶部：0；左侧：0；底部：0；右侧：0；}这是一个重复的问题：