Question

我有一个div，其宽度是其容器宽度的百分比。我的问题是如何确保高度与宽度相同的像素长度，因为容器不是正方形（所以我不能仅仅将高度百分比设置为与宽度相同的东西）。此外，我更愿意使用纯CSS解决方案，而不必在JavaScript中使用offsetWidth，clientWidth或其他此类属性。

示例：

<div style="width:45%;background-color:blue">My Content!</div>

感谢。

Answer 1

我担心纯CSS无法做到这一点。

如果你不介意，让我提供一个jQuery解决方案：

var $elem = $('div');
$(window).resize(function () {
    $elem.height($elem.width());
}).resize();

即使窗口大小发生变化，这也会使高度与宽度保持一致。您可以在演示中尝试一下（尝试调整大小）：

我使用了jQuery，因为它对浏览器处理元素的宽度和高度的方式有很大的帮助。

Answer 2

也许是这样的： http://jsfiddle.net/gcvogxgL/

＆＃13;

p { background-color: red; overflow: hidden; display: inline-block;}
p:before{content: ""; display: block; float: left; margin-top: 100%; }
p:after{ clear: both; content: ""; display: block; height: 1px;
margin-top: 100%; position: absolute; top: 0; }

＆＃13;

<p>This is short</p>
<p>This is a medium</p>
<p>This is a very long square</p>

＆＃13;

Answer 3

纯CSS无法实现这一点。使用一小撮Javascript，它突然变得非常容易。

$("#mydiv").css("height", $("#mydiv").css("width"));

如何使动态大小的<div>的高度与宽度</div>相同

3 个答案: