CSS:高度=宽度(另一种情况)

Question

我尝试通过 css 使宽度和高度相同(先验未知)。

有多种方法可以做到这一点( 1 ， 2 )但在我的情况下没有任何方法:

.cont{height: 150px; width: 300px; background: lightgray;} /*size is unknow*/
.cont>div:nth-child(odd){background:pink;}
.cont>div:nth-child(even){background:green;}
.bordered{border:1px solid red;}

.square{
	position: relative;
	width: auto;		/* desired width */
}
.square:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.square>div{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont">
  <div class="col-xs-4">a
    <div class="square"><div class="bordered"><img src="http://lorempixel.com/125/100">red bordered SQUARE auto width does not work, content size is unknow!</div>
    </div>
  </div>
  <div class="col-xs-4">b
  </div>
  <div class="col-xs-4">c
  </div>
</div>

先决条件:

• 正方形的父项或其尺寸未知。
• 正方形的内容或其尺寸是未知的(我在里面放了一张带有一些文本的图像只是为了给容器一些异构的内容)。
• 所以我无法控制其中任何一个( parent 或 child )，也无法修改其属性。
• 我唯一可以控制的是 .square 元素或/及其直接(和唯一)子元素。

问题:如何在这种情况下实现 CSS 正方形(红色边框)，而不必指定以像素为单位的宽度(按内容保持“自动” )?

Answer 1

我已经调用了 squared 类内部的 img 以匹配其容器的尺寸。只有两个调整，一个是 img 元素的 css:

    .square img{
  height:auto;
  width:100%;
}

并且我调整了您请求的 lorempixel 图像的高度。

    <img src="http://lorempixel.com/125/125"></div>

看看这个 jsfiddle