实际上，使用我在this blog中找到的这个巧妙的技巧就可以实现它

#square {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
}

否和是（有点）

好吧，所以简短的答案是“不”，不可能。长的答案是“是”，考虑到某些约束和让步（额外的HTML标记，以及对可以做什么的限制）。
给定此CSS：

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
    overflow: auto; /* UPDATE: if content may overflow square */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

使用此HTML：

<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="extrawrapper">
<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
</div>
<div class="extrawrapper">
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
</div>

您可以让它执行what this fiddle shows。

这些关键点是：
1.使用的图像需要是正方形图像，因为它驱动成比例的大小调整（img元素是唯一可以做这种成比例工作的元素，因为它可以根据图像本身的比例来调整大小）。
1.您必须知道是要设置width还是height，以便正确设置图像类来调整其大小。* 可选 *，在img本身上设置width或height，那么你就不需要担心把一个类设置为100%的值，我的演示假设你在 Package 器div（我的.square类）上设置大小。
1.要让div围绕驱动成比例大小调整的img折叠，您需要在div上设置display: inline-block或float（如上面css中所述）。
1.由于第3条，如果希望div表现得更“像块”，就需要像第三和第四条所示的那样为它们提供额外的 Package 器div。

• 显然，这个解决方案涉及到很多额外的标记。* 所以在很多方面，最好说“只使用javascript”，但我确实想证明它可以完全用HTML和CSS来完成（至少在某些情况下）。

更新：显示灵活尺寸调整的可能性

See this fiddle for percentages driving the size，使用此html示例（将width设置为30%）：

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>

我今天需要实现类似的东西，对图像也有同样的想法。我想检查其他的可能性，谷歌把我引到了这里。
...你并不真的需要一个图像src。如果你想要一个正方形，你可以简单地使用一个hash。它节省了一个http请求。
如果你想得到不同的高宽比，你应该使用src。如果你想有一个16：9的比例，图像应该是16px宽和9px高（去尽可能小）

比较两种技术（参见本主题中的其他答案）

img与padding-bottom的比较
Here's a fiddle显示img版本的兼容性有多大（也可以轻松处理px值（间隔将每秒调整“正方形”的大小）
如果使用百分比值，两种技术都可以获得相同的结果，但填充版本不需要额外的标记（<img src="#"/>）

结论：

根据实现的不同，每种技术都有其优缺点。

HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}

一个原生的JS方法来回应@Dave comment on @praveen-kumar的回答：

var squareElement = function(el) {
    el.style.height = el.offsetWidth + 'px';
}

并在任何地方使用

squareElement(document.querySelector('your-selector'));

不使用%这样的相对单位，因为它们是相对于容器元素计算的，但是如果使用px或em这样的单位来设置两个维度，则可以使元素成为正方形。

这不能单独使用CSS来完成。使用jQuery，您可以通过执行以下操作来实现

var chld = $('.child').width();
$('.child').css({'height':chld+'px'});

检查http://jsfiddle.net/4Jnfq/处的工作示例
在最后一次“随内容调整大小”更新中，可以找到**here**仅CSS解决方案。
虽然它适用于圆形，但您可以删除border-radius: 50%以使其适用于方形。