3

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

例子：

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

谢谢。

4

3 回答 3

2

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

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; }
<p>This is short</p>
<p>This is a medium</p>
<p>This is a very long square</p>

于 2015-01-13T21:34:42.273 回答
2

恐怕这对于纯 CSS 是不可能的。

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

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

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

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

于 2012-04-06T17:18:15.280 回答
0

这对于纯 CSS 是不可能的。使用一小块 Javascript，它突然变得非常容易。

$("#mydiv").css("height", $("#mydiv").css("width"));​
于 2012-04-06T17:18:39.520 回答