Question

如何使用css使高度等于宽度。

我有这样的HTML：

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

现在，我想使a元素的高度等于宽度（35％）。我怎样才能做到这一点？谢谢你的帮助。

Answer 1

我有这个：

<强> HTML：

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

<强> CSS：

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

JSFiddle： http://jsfiddle.net/wGszc/

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

您可以根据自己的需要进行调整......

而且...... 谷歌中的一点搜索不会造成伤害：https://www.google.com/search?q=make+height+iquals+to+width

Answer 2

使用window.getComputedStyle获取计算出的宽度，然后进行计算以获得相同的百分比，使其与宽度相同。

HTML

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

JS

var anchor = document.querySelector(".someDiv .someAnchor");
var astyle = window.getComputedStyle(anchor);
anchor.style.height = astyle.width; //this will make it static though

//to make it a percentage like width so it will expand and contract with resize of parent element

var pstyle = window.getComputedStyle(anchor.parentNode);
var pheight = parseInt(pstyle.height);
var awidth = parseInt(astyle.width);
anchor.style.height = ((awidth/pheight)*100)+"%";

请注意，锚元素将大于div高度，以便将其保持在父级内部，您必须将其缩小。

JSFiddle Demo

如何用css使高度等于宽度

2 个答案: