CSS调整以填补父母，保持正方形

Question

是否有一种纯粹的基于CSS的方法来调整块级元素的大小，使其尽可能地填充其父级，但仍保持正方形？

---

一个有趣的用例

我编写了一个非常简单的模拟时钟，主要使用CSS和一小撮JavaScript。

http://jsbin.com/iqicuk

它已被写成：

http://jsbin.com/emiyer

我想缩小它以填充页面，但显然保持成比例。

如果我将#clock的宽度和高度设置为100％，当然，它会被拉出比例：

http://jsbin.com/esubol

Answer 1

你不能用纯CSS做到这一点，但是你可以用Javascript做 - 而且我假设你还运行Javascript来调整父元素的大小。

Answer 2

正在进行的解决方案

thirtydot提出了一种非常聪明的技术，它利用了只有一个定义尺寸的图像按比例缩放的事实，并且他利用这个来确定元素的大小。我们现在有一个可以正确缩放的时钟，但仅当视口宽度大于高度时，不是相反：

http://jsbin.com/isixug

同样，如果我们将img和#clock更改为具有已定义的宽度而不是已定义的高度，那么我们有一个可以正确缩放的时钟，但仅当视口高度大于宽度：

http://jsbin.com/awucun

---

解决方案

我们可以结合上面的两个“技巧”，每个“技巧”仅适用于一个方向，使用媒体查询进行方向，并根据视口方向指定正确的“技巧”。我们现在有一个完全可扩展的时钟，无论视口方向或大小如何：

http://jsbin.com/okodib

Answer 3

任何in flow block level元素都将从其父元素继承宽度。然而，对于高度，您需要找到替代方案。

我怀疑这是你想要做的事情，但是如果你将你的父母设置为position: relative;，然后你想要填充那个父亲position: absolute;。然后使用top:0;left:0;bottom:0;right:0;指定相对于其父级需要粘贴的位置。

然而，这个解决方案在较低版本的IE中存在兼容性问题，很少被应用程序接受......

Answer 4

正如Jens Roland所说，通过纯CSS无法做到这一点。 也许LESS对您有所帮助。